@ZEAL Blog·厉
WWW Zeal Blog
We stand alone,
TOGETHER.

当td为空时怎样显示其边框

Posted by zeal on 2006-09-23 02:05 , 2367 characters |  + 2 - 0   English
转载请保留本行原始出处声明信息 : http://www.zeali.net/entry/437 MaDe1nZEAL
标签 ( WebDev ):  , 

  之前总结了下如何用 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  这儿有内容
这儿有内容  

Last Modified on 2008-06-05 14:41
1 条评论:
- 司马易风 () (link) 于 2006-09-23 08:12
通常我就是打个空格,没想过这么复杂,呵呵,谢谢提供
日志存档
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC

署名-非商业性
-相同方式分享
ZEAL Blog 基于
Powered byPivot - 1.24.1: 'Arcee'
Pivot1.24.1
开发
系统部署于
Linode.com
Launched @
2005-04-27
Since 2005.04.27  梦想 就像鸡蛋 要么孵化 要么臭掉RSS Feed (Entries) | About me | Back To Home | @ZEAL | zbird.com | 沪ICP备05024379号