不像div直接设置宽度即可,table中宽度有一套表格布局算法,首先要了解表格中宽度的计算方法才能灵活使用。
表格宽度算法:
table-layout 属性定义 table 用于布局单元格、行、列的算法。
table有两种布局:
1.table-layout: auto;:自动表格布局,列宽度由单元格内容设定(默认)
2.table-layout: fixed;:固定表格布局,列宽由表格宽度和列宽度设定
自动布局单元格的宽度主要由内容长度决定
1.如果没有设置单元格width,单元格最小宽度为内容长度;
2.如果设置了单元格width
·当单元格设定的 width 小于 内容长度,单元格最小宽度为小于 内容长度
·当单元格设定的 width 大于 内容长度,单元格最小宽度为width
·当单元格设定的 width 大于内容长度,且各列单元格设置的width之和大于table总宽,则按width比例设置各列宽度,table宽度不变
·当单元格设定的 width 大于内容长度,且各列单元格设置的width之和小于table总宽,则按width比例设置各列宽度,table宽度不变
固定布局单元格的宽度主要由设置的width决定
1.如果没有设置单元格width,各列宽度均分
2.如果设置了单元格width
·当单元格width之和小于table总宽度,按width设置的比例设置宽度,table宽度不变
·当单元格width之和大于table总宽度,按width设置的比例设置宽度,table宽度会被撑大
注:且只收第一行设置的宽度影响,在其他行设置无效
性能对比:
自动表格布局算法中,表格及单元格宽度由其包含的内容决定,要在整个表格后加载解析完成之后才能最终确定,如果某行的列宽和前面的不一致,则之前绘制好的行也必须重新绘制,因此很低效。
固定表格布局算法中,一旦表格的第一行下载、解析完成,整个表格就可以被渲染,相对于自动布局算法,可以提高渲染速度。
补充一个小技巧:
当设置为固定布局,第一行含有合并单元格,设置第一行的宽度之后,合并单元格下的单元格宽度为均分,单独设置其下的宽度是无效的(因为只有第一行宽度有效),如下图:
可以试一下下面的方法:
<tr style='height:0'>
<td width='140'></td>
<td width='60'></td>
<td></td>
</tr>
在第一行上面添加一行隐藏行,设置为height:0(display:none不行)
效果:
环境:
可以在这里进行尝试
以上是在chrome下的测试