×

ie6/7表格td中无内容时不显示边框

作者:Terry2013.01.05来源:Web前端之家浏览:5188评论:0
关键词:ieie7td边框

在做表格数据的时候,有时候会出现表格空数据的情况,这时候在ie6/7浏览器下面会出现单元格不显示边框,其他浏览器正常。下面可以提供4种方法:

1、在单元格中加入一个空格。这样: <td>&nbsp;</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了出现细线边框了。

说明:这种方法最佳,用得最多。但是如果你想把表格弄成有立体感的话,就不行了,如下图:

image


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种;大家有什么看法可以留言给我,谢谢!

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/ie6/7表格td中无内容时不显示边框.html

网友评论文明上网理性发言已有0人参与

发表评论: