Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks

在ie(经测试IE8已经不存在此问题)中如果td标签中没有内容时,存在不显示边框的问题,最简单的办法就是用javacript,在文档加载完后加入下面的JS:

var aTd=document.getElementsByTagName("td");
for(i=0;i<aTd.length;i++) {
if(aTd[i].innerHTML=="")aTd[i].innerHTML="&nbsp;";
}

当然还有别的办法,在TD所属的那个table用CSS也是可以的

table{ border-collapse:collapse;}

之前总结了下如何用 css 来实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗效果,然后有网友问我为什么他写了一个类似的 css 样式,但只能在 Opera 下正常看到表格的边框效果, IE 下则什么也没有。

于是我跑去下了个 Opera9 一看,确实如此。原因倒也不复杂:因为在 IE 下( Firefox 似乎和 IE 一致)如果某个 td 的内容为空的话,即便你设置了高度和宽度,这个 cell 的边框样式也是不会被显示出来的; Opera 则不管是否有内容与否,一概应用样式来渲染。这个问题刚毕业那会就碰到了,当时部门的科长来问我,后来我跟他说:给每个空的 td 加上   就行了。以后每次碰到这个问题,我就统统采用这个简单粗暴有效的方式来解决了。

  但今天卯足了劲研究了几下,从 Jiarry 那知道原来 css 语法是允许我们对这些缺省行为进行改变的:使用 border-collapse:collapse;empty-cells:show; 就可以让消失的边框显现出来。

class="test1": 加 border-collapse:collapse;

.test1{
border:1px solid #999999;
border-collapse:collapse;
width:60%
}
.test1 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px;
}

class1  这儿有内容


这儿有内容


 

class="test2": 加 border-collapse:collapse; 和 empty-cells:show;

.test2{
border:1px solid black;
border-collapse:collapse;
width:60%
}
.test2 td{
border-bottom:1px solid black;
height:28px;
padding-left:6px;
empty-cells:show;
}

class2  这儿有内容


这儿有内容


 

class="test3": 不加 border-collapse:collapse; 和 empty-cells:show; 的情况下

.test3{
border:1px solid #999999;
width:60%
}
.test3 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px;
}

class3  这儿有内容


这儿有内容


 

posted on 2009-12-26 09:35 seal 阅读(3187) 评论(1)  编辑  收藏 所属分类: webCSS

评论

# re: IE中td内容为空时不显示边框的解决办法(转) 2010-06-21 15:32 e
<style>  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: