Chromium 计算表格宽度不正确？

Question

所以我有一个宽表，在 Chromium 的最新版本中显示有点错误。 37 版可以正确渲染，44 版则不能。

问题是最后一列不包含在table/thead/tbody宽度中。所以标题比它应该的要窄。如果我设置table-layout:fixed，这个错误就会消失，但我必须使用auto。

看起来像一个铬错误，但无论如何，有解决方法吗？

JsFiddle以下：

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
}

<table>
  <caption style="background: lightgreen;">
    Caption
  </caption>
  <thead>
    <tr>
      <th>
        Title
      </th>
      <th>
        Description
      </th>
      <th>
        Lorem Ipsum
      </th>
      <th>
        Lorem Ipsum
      </th>
      <th>
        Actions
      </th>
      <th>
        Actions
      </th>
      <th>
        Actions
      </th>
      <th>
        Actions
      </th>
      <th>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet
      </td>
      <td>
        <span>Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit. Vestibulum dignissim mauris vel auctor
                        dapibus. Morbi scelerisque interdum magna, sed pulvinar
                        libero fringilla quis. Vivamus maximus lorem tempor
                        nibh eleifend, ac euismod velit dictum.</span>
      </td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
      <td>qwe</td>
    </tr>
  </tbody>
</table>
</body>

</html>

Answer 1

据我所知，这是一个令人着迷的 Chrome 错误。

这是一种解决方法using <col> 为描述列提供width: 100%（根据需要替换宽度大小）这可以阻止错误并且不会破坏任何列宽：

table {
  border-collapse: collapse;
  border: solid 10px #F00
}
th,
td {
  border: 1px solid black;
  padding: 5px;
}
.description {
  width: 100%
}

<table>
  <caption style="background: lightgreen;">Caption</caption>
  <col>
  <col class="description">
        <thead>
          <tr>
            <th>1Title</th>
            <th>2Description</th>
            <th>3Lorem Ipsum</th>
            <th>4 Lorem Ipsum</th>
            <th>5 Actions</th>
            <th>6 Actions</th>
            <th>7 Actions</th>
            <th>8 Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1 Lorem ipsum dolor sit amet</td>
            <td>2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim mauris vel auctor dapibus. Morbi scelerisque interdum magna, sed pulvinar libero fringilla quis. Vivamus maximus lorem tempor nibh eleifend, ac euismod velit dictum.

            </td>
            <td>3qwe</td>
            <td>4qwe</td>
            <td>5qwe</td>
            <td>6qwe</td>
            <td>7qwe</td>
            <td>8qwe</td>
          </tr>
        </tbody>
</table>

Answer 2

我认为这是数量的问题，因为第一行比第二行多一个。 TH 为空，TD 不存在。请测试一下：

https://jsfiddle.net/Lk8coxL6/2/

我在空 th 中添加了一个空格，并添加了缺少的 td。

<th> &nbsp; </th>

和

<td> qwe </td>

祝你好运