google-chrome - 表格布局 : fixed issue with column widths

Question

我们正在使用 CSS table-layout: fixed我们的移动应用程序的属性。 (我不记得全部原因，但我相信这与启用某种自动换行有关)...

我遇到了一个问题，我们需要调整两列表的两列之一的大小。没什么大不了的，通常我们这样做:

<table>
  <tbody>        
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

这很好用。

但是，如果我们需要在此之前创建跨越两列的行:

<table>
  <tbody>   
    <tr>
      <td colspan="2">hello world</th>
    </tr>     
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

至少在 Chrome 中，发生的情况是两列对齐到 50% 的宽度。我这里有一个 jsbin 示例:

http://jsbin.com/ejovut/3

这是正常行为吗？一个 Chrome 错误？解决此问题的方法？

Answer 1

这不是一个错误。 table-layout:fixed意味着允许浏览器通过假设只有第一行和第一列的规范很重要来优化表格布局计算。特别是它不是 需要对后面的表格内容进行检查和布局计算，这会对布局性能产生很大的影响。

正确的解决方案是使用 <col>和 <colgroup>元素显式指定列宽，而不是使用第一行。