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权威指南