css empty-cells的功能详解说明


摘要:
下文讲述css属性empty-cells的功能说明,如下所示:


css empty-cells的功能说明

css empty-cells的功能: 
    设置html表格对象中当单元格中无内容时,是否显示单元格的边框
css empty-cells注意事项:
   1.IE7及以下版本的浏览器中默认无内容时,是隐藏边框( 也是有内容)
   2.只有当边框独立(即border-collapse属性等于separate时),此属性才起作用
   3.使用js脚本设置empty-cells属性可使用emptyCells属性 

css empty-cells语法:
  empty-cells:hide | show
 ------------参数说明-----------
   hide:
    设置表格的单元格无内容时,隐藏该单元格的边框。
   show:
     设置表格的单元格无内容时,显示该单元格的边框。


css empty-cells的功能示例说明

 <meta charset="utf-8" />

<style>
h1{font-size:16px;font-family:Arial;}
.tb{empty-cells:show;}
.tb2{empty-cells:hide;}
</style> 
<P>
 maomao365.com<br />
 表格之empty-cells属性示例说明
</p>
<hr />
<h1>show:</h1>
<table border="1" class="tb">
<tbody>
	<tr>
		<td>序号</td>
		<td>姓名</td>
		<td>年龄</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Joy</td>
		<td>26</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Kate</td>
		<td></td>
	</tr>
</tbody>
</table>

<h1>hide:</h1>
<table border="1" class="tb2">
<tbody>
	<tr>
		<td>序号</td>
		<td>姓名</td>
		<td>年龄</td>
	</tr>
	<tr>
		<td>1</td>
		<td>Joy</td>
		<td>26</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Kate</td>
		<td></td>
	</tr>
</tbody>
</table> 
css表格之empty-cells属性示例说明

css表格之empty-cells属性示例说明