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

Answer 1

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

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

Answer 2

第一个表行应该包含所有此外，Chrome漏洞不允许使用此功能。

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

2 个答案: