关于html表格单元格宽度的计算规则

本文转载于:猿2048网站➻关于html表格单元格宽度的计算规则

关于表格宽度的渲染规则

表格单元格宽度的计算方式主要分为两种方式：固定表格布局、自动表格布局，这个常常写css的人应该仍是知道的，可是咱们常常会发现给表格列定了宽度不起做用，又或是没有定宽度渲染出来的倒是正常的吗，下面就来介绍下这两个方式具体是怎么计算渲染的。

先设定几个通用的变量：

• tableWidth=表格宽度=100%
• tableBorderWidth=表格左右边框宽度
• tdBorderWidth=全部列左右边框宽度和（合并的边框算1px）
• tdPadding=全部列左右内填补和
• tdWidth=全部定义了width的列的宽度和
• tdLength=列个数

1、固定表格布局，表格添加table-layout:fixed

ps：在固定表格布局中，表格列的宽度与列内容多少无关，只与表格宽度、列宽度、表格左右边框、列左右边框、列左右内填补有关

经过使用固定表格布局，用户代理在接收到第一行后就能够显示表格，即只有第一行的宽度才会起做用

width为auto的列的宽度（即未定义width的列的宽度,若是计算结果为负数则为0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength

一、全部th宽度未定义

每列的宽度经过表格宽度平均分配

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

二、全部th都定了宽度，同时全部列宽度之和小于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）

每列的宽度经过总宽度平均分配；表格的宽度为其定义的宽度

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

三、全部th都定了宽度，同时全部列宽度之和大于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）

每列的宽度为自身定义的宽度;表格的宽度为全部列宽度总和（会超出表格定义的宽度）

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

四、部分th定了宽度，同时定了th宽度的列的宽度以后小于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth）

ps:深灰色背景的列为定义了宽度的列

定义宽度的列的宽度为自身定义的宽度，其余没有定义宽度的列的宽度为表格总宽度减去定义的宽度之和再平均分配

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

五、部分th定了宽度，同时定了th宽度的列的宽度以后大于表格宽度（tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth）

ps:深灰色背景的列为定义了宽度的列

定义宽度的列的实际宽度为自身定义的宽度，其余没有定义宽度的列的宽度为表格总宽度减去定义的宽度之和再平均分配，平均分配后的宽度小于零，则其它没有定义宽度的列的宽度为0

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2、自动表格布局，表格设置table-layout:auto（该属性默认值就是auto）

每一个列的宽度由单元格中没有折行的最宽的内容设定的，此种算法有时候会很慢，这是因为它须要在肯定最终的布局以前访问表格中全部的列

一、全部th都未定最小宽度

每一列的宽度彻底由里面的内容所决定。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

二、全部th都定义了最小宽度，根据内容计算的全部列之和小于表格宽度

每列宽度首先根据内容计算，同时不能小于定义的最小宽度，多余的宽度每一列上面平均分配点。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4	row5	row6	row7	row8	row9	row10

三、全部th都定义了最小宽度，根据内容计算的全部列之和大于表格宽度

每列宽度首先根据内容计算，其次不能小于定义的最小宽度

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

四、部分th定义了最小宽度，根据内容计算的全部列之和小于表格宽度

ps:深灰色背景的列为定义了最小宽度的列

每列宽度首先根据内容计算，其次不能小于定义的最小宽度，最后表格渲染出来的宽度不能小于表格自身定义的宽度。

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2	row3	row4row4row4row4row4row4row4row4	row5	row6	row7	row6	row9	row10

五、部分th定义了最小宽度，根据内容计算的全部列之和小于表格宽度

ps:深灰色背景的列为定义了最小宽度的列

每列宽度首先根据内容计算，其次不能小于定义的最小宽度

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10