定义和用法
tableLayout 属性用来显示表格单元格、行、列的算法规则。
- 固定表格布局:(table-layout: fixed)
- 固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
- 在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
- 通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。
- 自动表格布局:(table-layout: auto)
- 在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
- auto属性:
当设置为auto属性,也就是table-layout属性的时候,如果表格设置了width属性height属性,那么表格的宽度和高度就是设置的值。不管你是否设置了单元格的高宽值,表格的高宽都已经限定了!如果没有设定,那么表格宽度高度则为单元格宽高(包括一些padding、border属性等)累积的总和。
- fixed属性:
但是当设置了fixed属性的时候,如果表格设置了width属性height属性,如果设置的单元格宽高累加起来的总和比表格设置的宽高总和要大,那么表格的实际宽高就为每个单元格宽高累积的总和,但是如果单元格累积的总和比表格自己设计的要小,那么表格的宽高属性则为表格设置的宽高值。
2. 对表格设置table-layout:fixed属性以后,如果表格的第一行tr中的td设置过单元格合并,后面tr中的td无论如何设置宽度都没有任何效果,针对这个问题有如下两种解决方法
1.在表格的第一行设置一个隐藏的行如下:
<table style="table-layout: fixed; width:100%;">
<tr style="display:none">
<td width="30%"></td>
<td width="40%"></td>
<td width="30%"></td>
</tr>
<tr>
<td colspan="3">统计表</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
- 在表格的tbody前插入col元素
<table>
<col style="width:100px"/>
<col style="width:200px"/>
<col style="width:300px"/>
<tbody>
<tr>
<td colspan="3">统计表</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</tbody>