在做表格数据的时候,有时候会出现表格空数据的情况,这时候在ie6/7浏览器下面会出现单元格不显示边框,其他浏览器正常。下面可以提供4种方法:
1、在单元格中加入一个空格。这样: <td> </td>。
说明:这种方法比较简单,不过看情况使用。
2、定义table和td的CSS样式如下
table{border-collapse:collapse;}
td{empty-cells:show;}
说明:
1)、border-collapse只能是collapse,虽然border-collapse还有separate,inherit属性。用这种方法可以把边框显示出来,但很郁闷的是它显示的是细边框。顺带一下separate和collapse吧, separate:separate : 默认值。
2)、边框独立(标准HTML),跟没用这个属性时显示的一样。(inherit在我看来跟separate 没啥区别)
collapse :相邻边被合并 相邻边被合并!默认时相邻边没有合并,所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了,所以宽度就是 1+1=1了出现细线边框了。
说明:这种方法最佳,用得最多。但是如果你想把表格弄成有立体感的话,就不行了,如下图:
3、table { caption-side: top; width: auto; border-collapse: collapse; empty-cells: hide; }
或者 table {width:100%;border-collapse: separate;empty-cells:show;} 。
说明:目前IE6.0持此属性,貌似只能在css2中使用。相应的脚本特性为emptyCells。
4、这里能使边框显示出来的核心是 rules="cols"。
总结:就个人项目经验来说,前两种方法用的最多,尤其是第2种;大家有什么看法可以留言给我,谢谢!
网友评论文明上网理性发言已有0人参与
发表评论: