google-chrome - 表格布局：修复了列宽问题

Question

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

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

<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>and<colgroup>元素显式指定列宽，而不是使用第一行。

Answer 2

第一个表格行也应该包含所有内容，Chrome 错误不允许用于此。