美文网首页重修前端
自动表格布局和固定表格布局

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

作者: adiu | 来源:发表于2016-06-06 17:08 被阅读250次

表格的应用场景


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

难点


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

解决方案


采用表格的 固定布局算法(table-layout: fixed) — 对<table>元素或其他具有display: table样式的元素应用这个属性即可

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

《CSS SECRETS》

相关文章

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

    表格的应用场景 统计数据 电子邮件 展示大量的元数据 难点 表格默认是 自动布局算法(table-layout: ...

  • DIV内容垂直居中

    《虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就...

  • 前端的多列布局解决方案

    前端页面的布局经历了固定布局,表格布局,浮动、定位布局, 弹性布局,网格布局的历史演进,各种布局方式在web发展的...

  • HTML-06day

    1、按钮练习 2、固定定位 3、电驴导航 4、表格样式 5、表格布局 6、表格 7、表格属性简写 8、背景 9、新...

  • 2019-03-15

    实验内容:关于线性布局、约束布局及表格布局的使用 主要代码: 主界面: 线性布局: 约束布局: 表格布局: 截图:...

  • 关于表格table-layout:fixed属性的问题

    定义和用法 tableLayout 属性用来显示表格单元格、行、列的算法规则。 固定表格布局:(table-lay...

  • 网页常用布局方式

    两列布局(左边固定,右边自适应) html结构 1.浮动 inline-block布局 绝对定位 表格布局 弹性盒...

  • 表格的常见问题(上)

    1.表格太宽,看不到左右边框 首先单击表格左上角的选择按钮全选表格,然后依次单击【表格工具—布局】—【自动调整】—...

  • 2.2.4 表格布局

    表格布局的概念 表格布局(TableLayout)是以表格形式排列控件的,通过行和列将界面划分为多个单元格,每个单...

  • Android之6大布局

    LineLayout (线性布局) RelativeLayout(相对布局) TableLayout(表格布局) ...

网友评论

    本文标题:自动表格布局和固定表格布局

    本文链接:https://www.haomeiwen.com/subject/mizrdttx.html