Chromium 计算 table 宽度不正确？

Question

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

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

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

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

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

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

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

<th> &nbsp; </th>

和

<td> qwe </td>

祝你好运

Answer 2

据我所知，这是一个令人着迷的 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>

Chromium 计算 table 宽度不正确？

Chromium calculates table width incorrectly?

html

css

google-chrome

chromium