table宽度

题目虽然是说table的宽度,但其实最让人抓狂的是单元格td的宽度。平时开发中也经常会遇到这方面的问题,所以我找资料学习table的宽度的算法。

table-layout

table-layout定义了表格布局算法,值为auto或fixed。

fixed

采用固定表格布局算法对表格布局。表格的宽度有width决定,列的宽度有首行单元格的width决定。
先上一个demo
分析一下,这里table计算宽度为200px,第一列的计算宽度为100px,第二列计算宽度为20px,第三列和第四列的计算宽度为33px。第三列和第四列的宽度是由table
宽度减第一列和第二列宽度之和以及单元格左右border宽度,再除以2得到。也许你会问,为什么“1-3”所在td不是定义了width吗?为什么第三列是计算得到的?答:因为定义了width的td不位于首行,th才是位于首行。

规则

  1. 如果设置了列元素(col),列元素的width被设置为列的宽度。demo

  2. 列元素的width为auto,或者没有设置列元素(如第一个demo),首行单元格的width将被设置为所在列的宽度。

  3. 如果不符合以上两种情况,则由浏览器计算确定。

auto(默认值)

采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容(还是可以为单元格设置width的)。

规则

  1. 计算最小单元格宽度

    1.1 计算每个单元格的最小内容宽度:内容可以流入多行,但不能超出单元格。
    1.2 如果单元格的width值大于最小可能宽度,则最小单元格宽度为单元格的width值。
    1.3 如果单元格的width值为auto,则最小单元格宽度为为最小内容宽度。
    
  2. 计算最大单元格宽度:完全显示内容且不换行(不考虑显示换行)时所需的宽度

  3. 计算最小列宽:该列中所有单元格的最小单元格宽度的最大值

  4. 计算最大列宽:该列中所有单元格的最大单元格宽度的最大值

  5. 如果单元格跨列,最小列宽之和必须等于这个跨列单元格的最小单元格宽度。最大列宽必须等于这个单元格的最大单元格宽度。

demo

其他

但table的width为auto时,即使table-layout为fixed,都会采用自动布局算法。demo

参考

  1. W3C CSS2.1中文文档

  2. MDN

  3. CSS权威指南

    原文作者:chenBright
    原文地址: https://segmentfault.com/a/1190000007882883
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞