正在读取数据,请稍候...
 
     
 
正在读取数据,请稍候...
时 间 记 忆
正在读取数据,请稍候...
最 新 评 论
正在读取数据,请稍候...
专 题 分 类
正在读取数据,请稍候...
最 新 日 志
正在读取数据,请稍候...
最 新 留 言
正在读取数据,请稍候...
搜 索
用 户 登 录
正在读取数据,请稍候...
友 情 连 接
博 客 信 息
正在读取数据,请稍候...


 
 
正在读取数据,请稍候...
   
 
 
当td表格数据为空时怎样显示其边框
[ 2008-6-9 1:05:00 | By: vc ]
 

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

  于是我跑去下了个 Opera9 一看,确实如此。原因倒也不复杂:因为在 IE 下( Firefox 似乎和 IE 一致)如果某个 td 的内容为空的话,即便你设置了高度和宽度,这个 cell 的边框样式也是不会被显示出来的; Opera 则不管是否有内容与否,一概应用样式来渲染。这个问题刚毕业那会就碰到了,当时部门的科长来问我,后来我跟他说:给每个空的 td 加上   就行了。以后每次碰到这个问题,我就统统采用这个简单粗暴有效的方式来解决了。

  但今天卯足了劲研究了几下,从 Jiarry 那知道原来 css 语法是允许我们对这些缺省行为进行改变的:使用 border-collapse:collapse; 和 empty-cells:show; 就可以让消失的边框显现出来。

<html>
<head>
<style>
 table{width:300px;border-collapse:collapse;
}
td{
    border:1px solid red;
    empty-cells:show;
}
</style>
</head>
<body>
<table>
<tr><td>ssss</td><td></td></tr>
<tr><td>ssss</td><td></td></tr>
</table>
</body>
</html>

 
 
  • 标签:边框 css div 
  • 发表评论:
    正在读取数据,请稍候...
     
         
       
         
    Powered by Oblog.