表格的应用场景
- 统计数据
- 电子邮件
- 展示大量的元数据
难点
表格默认是 自动布局算法(table-layout: auto) — 列的宽度是由单元格中没有折行的最宽的内容设定的 ,也就是说表格的内容影响单元格的宽度;在页面的加载过程中,会引起频繁的 重绘
解决方案
采用表格的 固定布局算法(table-layout: fixed) — 对<table>元素或其他具有display: table样式的元素应用这个属性即可
- 注意:
为了确保解决方案有效,必须为表格元素指定一个宽度(默认100%);同时为了让 text-overflow:ellipsis 也起作用,我们还需要为指定列的表头指定宽度;如果要自适应截断,则可以不限制其列的宽度
《CSS SECRETS》
网友评论