表格单元格宽度的计算方式主要分为两种方式：固定表格布局、自动表格布局，这个经常写css的人应该还是知道的，但是我们经常会发现给表格列定了宽度不起作用，又或是没有定宽度渲染出来的却是正常的吗，下面就来介绍下这两个方式具体是怎么计算渲染的。
先设定几个通用的变量：
tableWidth=表格宽度=100%
tableBorderWidth=表格左右边框宽度
tdBorderWidth=所有列左右边框宽度和（合并的边框算1px）
tdPadding=所有列左右内填补和
tdWidth=所有定义了width的列的宽度和
tdLength=列个数
ps：在固定表格布局中，表格列的宽度与列内容多少无关，只与表格宽度、列宽度、表格左右边框、列左右边框、列左右内填补有关
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格，即只有第一行的宽度才会起作用
width为auto的列的宽度（即未定义width的列的宽度,如果计算结果为负数则为0）= (tableWidth-tableBorderWidth-tdBorderWidth-tdPadding-tdWidth)/tdLength
每列的宽度通过表格宽度平均分配
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
每列的宽度通过总宽度平均分配；表格的宽度为其定义的宽度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
每列的宽度为自身定义的宽度;表格的宽度为所有列宽度总和（会超出表格定义的宽度）
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
ps:深灰色背景的列为定义了宽度的列
定义宽度的列的宽度为自身定义的宽度，其他没有定义宽度的列的宽度为表格总宽度减去定义的宽度之和再平均分配
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
ps:深灰色背景的列为定义了宽度的列
定义宽度的列的实际宽度为自身定义的宽度，其他没有定义宽度的列的宽度为表格总宽度减去定义的宽度之和再平均分配，平均分配后的宽度小于零，则其它没有定义宽度的列的宽度为0
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
每个列的宽度由单元格中没有折行的最宽的内容设定的，此种算法有时候会很慢，这是由于它需要在确定最终的布局之前访问表格中所有的列
每一列的宽度完全由里面的内容所决定。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1row1row1row1row1row1row1row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5row5row5row5row5row5row5row5 | row6 | row7row7row7row7row7row7row7row7 | row8row8row8row8row8row8row8row8 | row9row9row9row9row9row9row9row9 | row10row10row10row10row10row10row10 |
每列宽度首先根据内容计算，同时不能小于定义的最小宽度，多余的宽度每一列上面平均分配点。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4 | row5 | row6 | row7 | row8 | row9 | row10 |
每列宽度首先根据内容计算，其次不能小于定义的最小宽度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6row6row6row6row6row6row6row6 | row7 | row6row6row6row6row6row6row6row6 | row9 | row10row10row10row10row10row10row10 |
ps:深灰色背景的列为定义了最小宽度的列
每列宽度首先根据内容计算，其次不能小于定义的最小宽度，最后表格渲染出来的宽度不能小于表格自身定义的宽度。
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6 | row7 | row6 | row9 | row10 |
ps:深灰色背景的列为定义了最小宽度的列
每列宽度首先根据内容计算，其次不能小于定义的最小宽度
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| row1 | row2row2row2row2row2row2row2row2 | row3 | row4row4row4row4row4row4row4row4 | row5 | row6row6row6row6row6row6row6row6 | row7 | row6row6row6row6row6row6row6row6 | row9 | row10row10row10row10row10row10row10 |
以上是html中关于表格单元格宽度的计算规则的具体介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
