当td为空时怎样显示其边框_HTML/Xhtml_网页制作

php中文网
发布: 2016-05-16 16:43:53
原创
1550人浏览过

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

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号