html td 中隐藏边框,当td为空时怎样显示其边框

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

发布时间：2009-01-10 21:36:12   作者：佚名   我要评论

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

下了个 Opera9 一看，确实如此。原因倒也不复

之前总结了下如何用 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父子页面iframe双向发消息的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-10-12

这篇文章主要介绍了如何在HTML里加载摄像头，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-29

这篇文章主要介绍了html-webpack-plugin使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-15

这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-02

这篇文章主要介绍了详解HTML中字体使用line-height依然不能垂直居中解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友2020-08-20

这篇文章主要介绍了前端html换肤功能的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-20

这篇文章主要介绍了多个HTML页面共同调用一段html代码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-17

这篇文章主要介绍了HTML table行距的改变方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-07-31

这篇文章主要介绍了HTML Table 空白单元格补全的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2020-07-31

最新评论