td为空时显示其边框的方法

作者:kgmucom   在线用户:12
风之恋奇迹私服技术网是一家提供最新互联网编程技术网站

  我们都知道css实现 table 的 border + bordercolordark + bordercolorlight 的边框明暗效果,但是当td为空时border边框样式是不被执行的,那么我们应该怎么办呢?现在我们就去看看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;

  }

  通过以上内容我们知道原来css语法是允许我们对这些缺省行为进行改变的,以后遇到这个问题就可以使用 border-collapse:collapse; 和 empty-cells:show这个简单粗暴有效的方式来解决了。

提供最全面的奇迹sf开服版本和最新的奇迹私服开服技术信息,奇迹私服文库让每一位奇迹私服玩家找到自己需要的版本技术文章

上一篇:奇迹私服在博客中屏蔽垃圾留言的简单方法

下一篇:浅谈HTML超级链接

请发表您的评论