十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
对我来说,table
有一个非常有用,支持性也很好的 CSS
属性,但它却很少为人所知。它改变了表格的渲染方式,并生成一个更加稳定可靠的布局。
它就是:
table {
table-layout: fixed;
}
table-layout
的缺省值是 auto
,这个属性值及其效果大家十分熟悉。对我来说其效果十分的怪异,具体见如下演示:
查看演示效果
fixed
属性值应用 table-layout: fixed
之后,查看演示效果,可以得出如下结论:
overflow
属性生效text-overlfow
属性生效查看演示效果
我们以一个用户信息表格为例子进行演示。该表格的列宽是固定的,不根据内容的多少而变化;表格内容不折行显示,超出行宽部分加省略号部分显示。
上述表格的显示效果已经很好了,也比较接近实际项目的需要。
固定列宽的表格算法效果更容易预见,便于使用,同时渲染速度明显更快。因为表格的内容并不会影响单元格的宽度,所以在页面加载过程中,表格不需要频繁重绘。相信我们都对页面加载过程中表格不断重新调整列宽的恐怖情景记忆犹新。对于固定列宽的表格来说,这种情况就不会发生了。
本文主要汇编自 Chris Coyier 的一篇博客。但是因为本人水平有限,文中难免存在描述不清,代码不完善等问题,还请大家多多予以批评指正!
参考文献
Fixed Table Layouts
MDN table-layout
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。