【基础】固定列宽的表格及示例演示

引言

对我来讲，table 有一个很是有用，支持性也很好的 CSS 属性，但它却不多为人所知。它改变了表格的渲染方式，并生成一个更加稳定可靠的布局。

它就是：

table {
  table-layout: fixed;
}

table-layout的缺省值是 auto，这个属性值及其效果你们十分熟悉。对我来讲其效果十分的怪异，具体见以下演示：

查看演示效果

fixed属性值

应用 table-layout： fixed以后，查看演示效果，能够得出以下结论：

• 给单元格指定的宽度值生效
• overflow 属性生效
• text-overlfow 属性生效

查看演示效果

用例及分析

咱们以一个用户信息表格为例子进行演示。该表格的列宽是固定的，不根据内容的多少而变化；表格内容不折行显示，超出行宽部分加省略号部分显示。

查看演示效果

上述表格的显示效果已经很好了，也比较接近实际项目的须要。

固定列宽的表格算法效果更容易预见，便于使用，同时渲染速度明显更快。由于表格的内容并不会影响单元格的宽度，因此在页面加载过程当中，表格不须要频繁重绘。相信咱们都对页面加载过程当中表格不断从新调整列宽的恐怖情景记忆犹新。对于固定列宽的表格来讲，这种状况就不会发生了。

本文主要汇编自 Chris Coyier 的一篇博客。可是由于本人水平有限，文中不免存在描述不清，代码不完善等问题，还请你们多多予以批评指正！

参考文献

• Fixed Table Layouts
• MDN table-layout
• CSS-trick table-layout