Question

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

问题是最后一列未包含在表/ 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%（根据需要替换宽度大小）这样可以阻止错误并且不会破坏任何列宽：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

我在空洞中添加了一个空格，然后添加了丢失的td。

<th> &nbsp; </th>

和

<td> qwe </td>

祝你好运

Chromium错误地计算表格宽度？

2 个答案: