Page 206 - css揭秘

37 精确控制表格列宽

难题

尽管多年以前我们就不再使用表格来完成页面布局了，但表格在现代网
站中仍然有其不可替代的位置，我们需要用它来实现统计数据、电子邮件、
拥有大量元数据的列表等表格型数据。对其他元素的 display 属性使用表格
相关的关键字，也可以让它们具备表格类元素的行为。尽管有时候它们看起
来很方便，但对于不固定的内容来说，它们的布局其实是很难预测的。这是
因为列宽根据其内容进行调整，即使我们显式地指定了 width，也只能起到
类似提示的作用，如图 7-5 所示。
鉴于这个原因，我们往往不得不使用其他元素来呈现表格型数据，或者
干脆接受布局效果的不可预测性。有没有什么办法可以让表格的行为更加可
控呢？

解决方案

解决方案来自于 CSS 2.1 中一个鲜为人知的属性，叫作 table-layout。
它的默认值是 auto，其行为模式被称作自动表格布局算法，也就是我们最
为熟悉的表格布局行为（就像图 7-5 那样）。不过，它还接受另外一个值
fixed，这个值的行为要明显可控一些。它把更多的控制权交给了网页开
发者（没错，就是你），只把较少的控制权留给渲染引擎。我们设置的（宽
度）样式会直接起作用，而不仅仅被视为一种提示；同时，溢出行为（包括
text-overflow）与其他元素行为也是一样的，因此表格的内容将只能影响
表格行的高度了。

这种固定表格布局算法不仅更容易预测、便于使用，同时也明显更快。
因为表格的内容并不会影响单元格的宽度，所以在页面的下载过程中，表格
不需要频繁重绘。相信我们都对页面加载过程中表格不断重新调整列宽的恐
怖情景记忆犹新。对于固定表格布局来说，这种情况再也不会发生了。
在使用时，我们只需要对 <table> 元素或其他具有 display: table 样
式的元素应用这个属性即可。请注意，为了确保这个技巧奏效，需要为这
些表格元素指定一个宽度（哪怕是 100%）。同样，为了让 text-overflow:
ellipsis 发挥作用，我们还需要为那一列指定宽度。这就行了！你可以在
图 7-6 中看到效果：

37 精确控制表格列宽 175

඀ࠡ JOEC