html - Chromium 计算表格宽度不正确？

Question

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

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

看起来像一个 chromium 错误，但不管怎样，有解决方法吗？

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>