300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > ie8下table th和td宽度width设置不生效解决办法

ie8下table th和td宽度width设置不生效解决办法

时间:2019-11-03 14:09:21

相关推荐

ie8下table th和td宽度width设置不生效解决办法

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前后效果对比。

设置前

设置后

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。