为什么这两个相同的表根据浏览器宽度表现不同？

Posted 2021-04-05

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

看起来像一个溢出而另一个收缩以适应浏览器的宽度。但为什么会这样呢？

<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，它们仍然表现不同。但为什么？

一直在追逐这个bug几天，所以任何帮助将不胜感激。

答案

你的桌子完全不相同。内容不同。不同数量的列。

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

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>

另一答案

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

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

以上是关于为什么这两个相同的表根据浏览器宽度表现不同？的主要内容，如果未能解决你的问题，请参考以下文章

为啥这些具有完全相同类别的按钮宽度不同？

如何制作具有相同宽度百分比的响应式表格？

两个输入相同的表单列采用所有单元格宽度 Bootstrap 3

是啥导致两个具有相同自动布局约束的 UITableViewCell 表现不同？

连接两个具有相同键但不同字段的表

为啥 flexbox 项目图像根据其初始大小调整大小不同？