当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-30 13:53:48 CSS

介绍对我来说,表格有一个非常有用且支持良好的CSS属性,但鲜为人知。它改变了表格的呈现方式并产生更稳定和可靠的布局。就是:table{table-layout:fixed;}table-layout的默认值是auto,这个属性值和作用大家都很熟悉了。对我来说,效果很奇怪,具体看下面的demo:查看demo效果fixedattributevalueapplytable-layout:fixed之后,查看demo效果,可以得出如下结论:cell指定的宽度值生效overflow属性生效text-overlfow属性生效查看演示效果用例及分析下面以一个用户信息表单为例进行演示。表格的列宽是固定的,不会根据内容的多少而变化;表格内容不换行显示,超出行宽的部分用省略号显示。查看演示效果上表的展示效果已经很不错了,比较贴近实际项目的需要。具有固定列宽的表格算法更可预测,更易于使用,并且呈现速度明显更快。因为表格的内容不影响单元格的宽度,所以在页面加载时不需要频繁重绘表格。我相信我们都对表格在页面加载期间不断调整列宽大小的恐怖记忆犹新。对于具有固定列宽的表,这不会发生。本文主要由ChrisCoyier的博客文章编译而成。但由于本人水平有限,文中难免存在描述不清、代码不完善等问题。请多多批评指正!参考资料固定表格布局MDN表格布局CSS技巧表格布局