table 列宽计算方式

一、固定表局部算法

使用这种快速算法,表格的水平布局不依赖于单元格的内容,仅取决于表格的宽度,列的宽度以及边框或单元格间距。

每列宽度算法:

如果列元素的 “width” 属性值不是 “auto” ,则该属性值设置 column 的宽度;

若第一行中 “width” 属性具有 “auto” 以外的值,那么除 “auto” 值以外的单元格将由固定算法确定该列的宽度,如果单元格跨越多个 column,则宽度在 columns 上划分;

其余的 column 平均分配剩余的水平表空间(减去边框或单元格间距);

table的宽度由表元素的 “width” 属性值与列宽之和(加上单元格间距和边框)之和中的较大者,如果表比列宽,则额外的空间应分布在列上。

若后续行的列数多余表列元素确定的列数和第一行确定的数中的较大者,则可能不会呈现其他列

通过这种方式,用户可以在收到整个第一行后开始对表进行布局,后续行中的单元格不会影响列宽,任何具有溢出内容的单元格都使用 “overflow” 属性来确定是否展示溢出的内容。

二、自动 table 布局算法

表的宽度是有其列(和中间边框)的宽度给出的。

列宽的确定方式:

计算每个单元格的最小内容宽度(MCW):内容可以跨越任意数量的行,但不能溢出单元格框,如果单元格指定的宽度(W)大于MCW,则W就是最小单元格的宽度,值 “auto” 表示 MCW 是最小单元格宽度。

对于每列,最大和最小列宽取决于仅占据该列的单元格。最小列宽取决于所有行的这一列中的最大的最小单元格宽

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值