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

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

Answer 2

第一行应该包含所有 此外，Chrome 的错误不允许用于此。