CSS - empty-cell 属性

CSS 中的 empty-cell 属性用于控制表中没有内容或被视为“none”的单元格的呈现。它仅适用于表格和表格单元格。

可能的值

show - 渲染空单元格的边界。
hide - 不绘制空单元格的边界。

适用于

所有元素都显示为表格单元格。

DOM 语法


object.style.emptyCell = "hide | show";

例

以下是用于隐藏 <table> 元素中空单元格边框的 empty-cells 属性。


<html>
<head>
<style>
	 	table.empty {
	 	 	 width: 350px;
	 	 	 border-collapse: separate;
	 	 	 empty-cells: hide;
	 	}
	 	table.show {
	 	 	 width: 350px;
	 	 	 border-collapse: collapse;
	 	 	 empty-cells: show;
	 	}
	 	td.empty {
	 	 	 padding:5px;
	 	 	 border-style:solid;
	 	 	 border-width:1px;
	 	 	 border-color:#999999;
	 	} 	
</style>
</head>
<body>
	 	<div>
	 	 	 <h2>empty-cell: hide</h2>
	 	 	 <table class = "empty">
	 	 	 	 	<tr>
	 	 	 	 	 	 <th></th>
	 	 	 	 	 	 <th>Header 1</th>
	 	 	 	 	 	 <th>Header 2</th>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>Title</th>
	 	 	 	 	 	 <td class = "empty">Data 1</td>
	 	 	 	 	 	 <td class = "empty">Data 2</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>Title</th>
	 	 	 	 	 	 <td class = "empty">Data 1</td>
	 	 	 	 	 	 <td class = "empty"></td>
	 	 	 	 	</tr>
	 	 	 </table>
	 	</div>
	 	<div>
	 	 	 <h2>empty-cell: show</h2>
	 	 	 <table class = "show">
	 	 	 	 	<tr>
	 	 	 	 	 	 <th></th>
	 	 	 	 	 	 <th>Header 1</th>
	 	 	 	 	 	 <th>Header 2</th>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>Title</th>
	 	 	 	 	 	 <td class = "empty">Data 1</td>
	 	 	 	 	 	 <td class = "empty">Data 2</td>
	 	 	 	 	</tr>
	 	 	 	 	<tr>
	 	 	 	 	 	 <th>Title</th>
	 	 	 	 	 	 <td class = "empty">Data 1</td>
	 	 	 	 	 	 <td class = "empty"></td>
	 	 	 	 	</tr>
	 	</table>
	 	</div>
</body>
</html>

打印本页