table-layout:修复了列宽的问题

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 bug？解决这个问题的方法？

Answer 1

这不是一个错误. table-layout:fixed意味着允许浏览器通过假设只有第一行和列规范很重要来优化表格布局计算.特别是,它确实不是需要检查和对后来的表中的内容,它可以使在布局性能有很大的差异做布局计算.

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