为啥这两个相同的表会根据浏览器宽度的不同而表现不同？

Posted 2023-03-06

【中文标题】为啥这两个相同的表会根据浏览器宽度的不同而表现不同？

【英文标题】：Why do these two identical tables behave differently based on browser width?为什么这两个相同的表会根据浏览器宽度的不同而表现不同？

【发布时间】：2018-08-09 18:43:15

【问题描述】：

我有这两个相同的表，但是当浏览器宽度改变时它们的行为不同。

似乎一个溢出，而另一个缩小以适应浏览器的宽度。但是为什么会这样呢？

<div id="article-body">
  <br>
  <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
      <thead>
          <tr>
              <th scope="col">One Tow Three</th>
              <th scope="col">Two Four One</th>
              <th scope="col">Three to The One Two</th>
              <th scope="col">Fiour Something Hljfal lkdsjfals ladskjfalsd  dlkafjsdl asdlkfj ere</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>one cool drive</td>
              <td>overdrive pedals everywhwere<br>
              </td>
              <td>three</td>
              <td>four</td>
          </tr>
          <tr>
              <td>five</td>
              <td>six</td>
              <td>seven</td>
              <td>eight</td>
          </tr>
      </tbody>
  </table>
  <br>
  <br>
  <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
      <thead>
          <tr>
              <th scope="col">Awesome Table Here</th>
              <th scope="col">Another Col</th>
              <th scope="col">Another One here</th>
              <th scope="col">Four Five</th>
              <th scope="col">Six</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>sjflsj</td>
              <td>lgsjdfkljgslkdfgjlksdfjg</td>
              <td>lsdfjgklsjfg<br>
              slkfdgjlksdfjglj<br>
              </td>
              <td>sflkjglksfdjg</td>
              <td>glksdjfgkljsf</td>
          </tr>
          <tr>
              <td>kljfglksjdfklg</td>
              <td>slkdrjglksfdjgqgsjdflkgjsdflkgj</td>
              <td>lfksjglkdfjglkjq1</td>
              <td>sdfjglksdfjglk</td>
              <td>flgkjsdlkfj sdfjglksj . gslkdfjgl lsdfhgj</td>
          </tr>
      </tbody>
  </table>
  <br>
</div>

JsBin here.

正如您在 bin 中看到的那样，没有附加 CSS，它们的行为仍然不同。但为什么呢？

几天来一直在寻找这个错误，所以任何帮助都将不胜感激。

【问题讨论】：

因为内容不同

内容定义了宽度，因为您没有明确定义列的宽度。

它们甚至没有相同数量的列。它们根本不是“相同的”，呵呵

啊，我要出去了。我明白了，这是因为最长单词的长度是一列可以得到的最小长度……由于第二个表的单词更长，所以它不能像第一列那样缩小。谢谢大家！

【参考方案1】：

您的桌子根本不一样。内容不同。列数不同。

如果您希望它们具有相同的宽度，则需要设置表格宽度。

table 
  width: 100%;

  <div id="article-body">
    <br>
    <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
        <thead>
            <tr>
                <th scope="col">One Tow Three</th>
                <th scope="col">Two Four One</th>
                <th scope="col">Three to The One Two</th>
                <th scope="col">Fiour Something Hljfal lkdsjfals ladskjfalsd  dlkafjsdl asdlkfj ere</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>one cool drive</td>
                <td>overdrive pedals everywhwere<br>
                </td>
                <td>three</td>
                <td>four</td>
            </tr>
            <tr>
                <td>five</td>
                <td>six</td>
                <td>seven</td>
                <td>eight</td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
        <thead>
            <tr>
                <th scope="col">Awesome Table Here</th>
                <th scope="col">Another Col</th>
                <th scope="col">Another One here</th>
                <th scope="col">Four Five</th>
                <th scope="col">Six</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>sjflsj</td>
                <td>lgsjdfkljgslkdfgjlksdfjg</td>
                <td>lsdfjgklsjfg<br>
                slkfdgjlksdfjglj<br>
                </td>
                <td>sflkjglksfdjg</td>
                <td>glksdjfgkljsf</td>
            </tr>
            <tr>
                <td>kljfglksjdfklg</td>
                <td>slkdrjglksfdjgqgsjdflkgjsdflkgj</td>
                <td>lfksjglkdfjglkjq1</td>
                <td>sdfjglksdfjglk</td>
                <td>flgkjsdlkfj sdfjglksj . gslkdfjgl lsdfhgj</td>
            </tr>
        </tbody>
    </table>
    <br>
  </div>

【参考方案2】：

我假设这是因为您的专栏。最后一个表格中有额外的一列内容。

编辑：这是因为 th 标签被其中的内容拉伸了。宽度随着内容的宽度被拉伸。