We stand alone,
together.
- BAND of BROTHERS
当td为空时怎样显示其边框
之前总结了下如何用 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 | 这儿有内容 | |||
| 这儿有内容 |
This Entry was Last Modified on 2008-06-05 14:41
1 条评论:
- 司马易风 () (link) 于 2006-09-23 08:12
通常我就是打个空格,没想过这么复杂,呵呵,谢谢提供
日志存档
继续阅读
ac米兰 ajax apache api blog blogchina cctv css dhtml download dreamhost dvd encoding error feeds firefox flash framework gmail google google_analytics google_talk http ide ie ie7 javascript jquery linux maxthon mod_rewrite movies msn mvc mysql oracle php pippo pivot rss shell socket sohu spammers svn vs web web2 webclient weblogic windows xml zend 阿根廷 安全漏洞 奥运 备份 变形金刚 程序员 地铁 浮动层 搞笑 工具 冠军杯 管理 火箭 进程 客户端 篮球 厉 旅行 命令行 欧洲杯 人生 设计模式 世界杯 数据库 搜索引擎 算法 图片 无极 系统优化 笑话 姚明 游戏 源代码 周杰伦 字符编码 足球 浏览器

