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

tablewidth

时间:2023-04-02 20:04:33 HTML

虽然题目说的是table的宽度,但是最郁闷的还是cell的宽度td。开发的时候经常遇到这方面的问题,于是找资料学习表格宽度的算法。table-layouttable-layout定义表格布局算法,取值为auto或fixed。fixed使用固定的表格布局算法对表格进行布局。表格的宽度由width决定,列的宽度由第一行单元格的宽度决定。先去一个演示。分析一下,这里的表格计算宽度为200px,第一列计算宽度为100px,第二列计算宽度为20px,第三四列计算宽度为33px。第三列和第四列的宽度是用表格的宽度除以第一列和第二列的宽度与单元格左右边框的宽度之和,再除以2.也许你会问,为什么“1-3”所在的td不定义宽度呢?为什么要计算第三列?答:因为定义width的td不在第一行,所以th在第一行。规则如果设置了列元素(col),则列元素的宽度设置为列的宽度。demo中列元素的宽度为auto,或者没有设置列元素(比如第一个demo),第一行单元格的宽度会设置为列的宽度。如果不满足以上两个条件,则由浏览器计算决定。auto(默认值)使用自动表格布局算法来布置表格。表格和单元格的宽度取决于它们包含的内容(仍然可以设置单元格的宽度)。计算最小单元格宽度的规则1.1计算每个单元格的最小内容宽度:内容可以流入多行,但不能超过单元格。1.2如果单元格的宽度值大于最小可能宽度,最小单元格宽度就是单元格的宽度值。1.3如果单元格的宽度值为auto,则最小单元格宽度为最小内容宽度。计算最大单元格宽度:不换行(无视显示换行)完全显示内容时所需的宽度计算最小列宽:列中所有单元格的最小单元格宽度的最大值计算最大列宽:在column所有单元格的最大单元格宽度的最大值如果单元格跨列,则最小列宽之和必须等于跨列的单元格的最小单元格宽度。最大列宽必须等于该单元格的最大单元格宽度。在其他demo中,当table的宽度为auto时,即使table-layout是固定的,也会使用自动布局算法。demo参考W3CCSS2.1中文文档MDNCSS权威指南