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>
