表格布局：修正了列宽的问题 [英] table-layout: fixed issue with column widths

问题描述

我们正在为我们的移动应用使用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？一种解决此问题的方法？

解决方案

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

正确的解决方案是使用< col> 和< colgroup> 元素明确指定列的宽度，比使用第一行。

We're using the CSS table-layout: fixed property for our mobile app. (I don't recall the full reason, but I believe it had to do with enabling word wrapping of some sorts)...

I've run into an issue where we need to size one of the two columns of the two column table. Not a big deal, usually we do this:

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

That works fine.

However, if we need to create a row that spans both columns BEFORE this one:

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

What happens, at least in Chrome, is that the two columns snap to 50% widths. I have a jsbin sample here:

http://jsbin.com/ejovut/3

Is this normal behavior? A Chrome bug? A way to work around this issue?

解决方案

This is not a bug. table-layout:fixed means that the browser is allowed to optimize table-layout computations by assuming only the first row and column specifications matter. In particular, it does NOT need to inspect and do layout computations on later table content, which can make a large difference in layout performance.

The right solution is to use the <col> and <colgroup> elements to explicitly specify column widths, rather than using the first row.

这篇关于表格布局：修正了列宽的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！