ie8下table th和td宽度有时候设置无效,不按设定的宽度显示,怎么办?
这种情况一般分为两种:
第一种,某td的内容很多,需要换行,将td撑开了。这种情况还比较好处理,只要给td设置css属性:word-break:break-all;word-wrap:break-word;
就可以了。
第二种,表格前面的行设置了单元格合并colspan,甚至是一行合并的,这时候没有合并的行,设置的列宽不生效了,被自动分配了列宽。如果过前面合并行去掉,又可以恢复正常。为什么呢?
原因: 表格设置了table-layout: fixed,所以其各列宽度由第一行决定,后面指定的宽度会被忽略。如果你第一行合并了,那后面的行各列宽度就被自动分配了。
解决办法:在表格的最前面,合并行之前,加入colgroup,设置好每列的宽度即可,如下所示
<colgroup>
<col style="width:10%;"/>
<col style="width:30%;"/>
<col style="width:20%;"/>
<col style="width:20%;"/>
<col style="width:20%;"/>
</colgroup>
下面是设置colgroup前后效果对比。
设置前
设置后