自动表格布局和固定表格布局

表格的应用场景


  • 统计数据
  • 电子邮件
  • 展示大量的元数据

难点


表格默认是 自动布局算法(table-layout: auto) — 列的宽度是由单元格中没有折行的最宽的内容设定的 ,也就是说表格的内容影响单元格的宽度;在页面的加载过程中,会引起频繁的 重绘

解决方案


采用表格的 固定布局算法(table-layout: fixed) — 对

元素或其他具有display: table样式的元素应用这个属性即可

  • 注意:
    为了确保解决方案有效,必须为表格元素指定一个宽度(默认100%);同时为了让 text-overflow:ellipsis 也起作用,我们还需要为指定列的表头指定宽度;如果要自适应截断,则可以不限制其列的宽度
    更多精彩文章请关注以下公众号


    自动表格布局和固定表格布局_第1张图片
    重修前端.jpg

《CSS SECRETS》

你可能感兴趣的:(自动表格布局和固定表格布局)