CSS empty-cells 属性值说明
| 值 | 描述 |
|---|---|
| show | 意味着将显示空单元上的边界和背景。这是此属性的默认值。 |
| hide | 意味着在空小区上的边界和背景不会显示。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
empty-cells 属性用于设置显示边框和背景是否应显示在表格中的空单元格上。
此属性适用于具有值为“separate”的边框折叠属性的表。
对于边框折叠属性，默认值为“显示”。
| 初始值 | | show |
|--- |--- |
| 应用于 | 表格的单元格元素 |
| 继承 | 可继承 | |
| 可动画的 | 不 |
| 版本 | CSS2. |
| DOM 语法 | object.Style.emptyCells =“隐藏”; |
语法
empty-cells: show | hide | initial | inherit;
空单元格属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.show {
empty-cells: show;
}
.hide {
empty-cells: hide;
}
td,
th {
border: 1px solid #1c87c9;
padding: 0.5rem;
}
</style>
</head>
<body>
<h2>Empty-cells 属性示例</h2>
<p>Here the "show" value is used: </p>
<table class="show">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
<br>
<p>In this table the "hide" value is used:</p>
<table class="hide">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
</body>
</html>
在空单元格属性的帮助下，CSS 可以检查 HTML 标记中表格内的内容进行相应的响应。
当我们不知道表格是否包含空数据点时，我们可以使用 empty-cells 属性，决定隐藏这些点。
当我们需要使用表格进行演示时，我们可以在此属性的帮助下隐藏或者显示元素。
具有“隐藏”和“显示”值的空单元格属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.show {
empty-cells: show;
}
.hide {
empty-cells: hide;
}
body {
background: #1c87c9;
padding: 25px 0;
color: #fff;
font-size: 2em;
text-align: center;
}
table {
display: flex;
justify-content: center;
}
td {
background: #fff;
border: 1px solid #8ebf42;
padding: 10px 15px;
color: green;
}
</style>
</head>
<body>
<p>The empty cells are shown</p>
<table class="show">
<tbody>
<tr>
<td>♦</td>
<td></td>
<td>♦</td>
<td>♦</td>
</tr>
</tbody>
</table>
<p>The empty cells are hidden</p>
<table class="hide">
<tbody>
<tr>
<td>♦</td>
<td></td>
<td>♦</td>
<td>♦</td>
</tr>
</tbody>
</table>
</body>
</html>
日期：2020-06-02 22:14:28 来源：oir作者：oir