绿色生命 Jiarry.126.com

td内无内容如何显示边框线

关键词： td    border    border-collapse    empty-cells:sho    显示td边框线                                          

当td为空时显示td的边线:给table加个border-collapse:collapse;给td加个empty-cells:show;都可以h2>
当td里内容为空时，td的border边框样式将不被执行，于是便出现有的td没有边线的情况，可以通过给空td输出一个&amp;nbsp;来解决，但是要输出&amp;nbsp;，就得修改程序，还得在程序里判断，。这样做似乎并不是最佳方案，下面是个相对较好的例子。<br>
下面是test.html源代码：

<h2>当td为空时显示td的边线:给table加个border-collapse:collapse;给td加个empty-cells:show;都可以</h2>
当td里内容为空时，td的border边框样式将不被执行，于是便出现有的td没有边线的情况，可以通过给空td输出一个&amp;nbsp;来解决，但是要输出&amp;nbsp;，就得修改程序，还得在程序里判断，。这样做似乎并不是最佳方案，下面是个相对较好的例子。<br>
<!----------test1------------>
class="test1"
<pre>
.test1{border:1px solid #e1e1e1;<b>border-collapse:collapse;</b>width:60%}
.test1 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;}
</pre>
<table border="0" cellpadding="0" cellspacing="0" class="test1">
<tr>
<td>class1&nbsp;</td>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>
<br><br>
<!----------test2------------>
class="test2":
<pre>
.test2{border:1px solid black;<b>border-collapse:collapse;</b>width:60%}
.test2 td{border-bottom:1px solid black; height:28px; padding-left:6px;<b>empty-cells:show;</b>}
</pre>
<table border="0" cellpadding="0" cellspacing="0" class="test2">
<tr>
<td>class2&nbsp;</td>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>
<br><br>
<!----------test3------------>
class="test3":普通不加border-collapse:collapse;和empty-cells:show;
<pre>
.test3{border:1px solid #e1e1e1;width:60%}
.test3 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;}  
</pre>
<table border="0" cellpadding="0" cellspacing="0" class="test3">
<tr>
<td>class3&nbsp;</td>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>
<style>  
.test1{border:1px solid #e1e1e1;border-collapse:collapse;width:60%}
.test1 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;width:20%}  
.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;width:20%}  
.test3{border:1px solid #e1e1e1;width:60%}
.test3 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;width:20%}  
pre{border:1px solid #999; background-color:#FFFFF4;color:#333;padding:10px;margin:10px 0 10px 0px}
pre b{color:blue} 
*{font-family:arial}
</style>
<pre>
语法：
 
empty-cells : hide | show
 
参数：
 
hide : 　隐藏
show : 　显示
 
说明：
 
设置或检索当表格的单元格无内容时，是否显示该单元格的边框。
只有当表格边框独立（例如当border-collapse属性等于separate时）此属性才起作用。
目前IE5.5尚不支持此属性。(IE5,IE6,Opera,Firefox支持)
对应的脚本特性为emptyCells。
 
示例：
 
table { caption-side: top; width: auto; border-collapse: separate; empty-cells: hide; }
 
</pre> 

【作者: 皮子/Jarry/Jiarry】【访问统计:】【2006年08月9日 星期三 17:24】【 加入博采】【打印】