栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

固定列宽的表格及示例演示

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

固定列宽的表格及示例演示

引言

对我来说,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

原文链接:https://segmentfault.com/a/1190000016009347

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242784.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号