Page 208 - css揭秘

图 7-6
指定单元格的宽度，则这些单元格
就会根据它们内容的长短来分配宽 对图 7-5 中的表格应用了 table-
如果我们不……
度。也就是说，内容较长的单元格 layout: fixed 之后的效果。按
所能分配到的宽度也较多 从上到下的顺序总结为：如果不指
定任何宽度，则各列的宽度将是平
均分配的；后续的表格行并不会影
指定单元格的宽度，则这些单元格 响列宽；给单元格指定很大的宽
就会根据它们内容的长短来分配宽 度也会直接生效，并不会自动缩
如果我们不……
度。也就是说，内容较长的单元格 小；overflow 和 text-overflow
所能分配到的宽度也较多
属性都是可以正常生效的；如果
overflow 的值是 visible，则单
表格的每一行都会参与到列宽的计算 注意，这个表格的列宽分配结果跟 元格的内容有可能会溢出
中，而不仅是第一行 上面那个表格不同

即使我们为单元格指定了宽度，也未必会得到对应的结果。比如这个单元格的宽度被指定为 1000px

如果我们禁
止文本折行
行为，那么
表格宽度可 而且 text-overflow: ellipsis 对此也无能为力……
能会远远超
出其容器的
宽度

大图片或代
码块也可能
会导致同样
的问题

试一试 play.csssecrets.io/table-column-widths

向 Chris Coyier（http://css-tricks.com）脱帽致敬，感谢他提出这个技巧
（http://css-tricks.com/fixing-tables-long-strings）。
致 敬

37 精确控制表格列宽 177

඀ࠡ JOEC