CSS3 表格增强 - empty-cells 属性

章节标题

CSS3 表格增强 - empty-cells 属性

核心知识点讲解

基本概念

empty-cells 属性用于控制表格中空单元格（没有内容的单元格）的边框和背景是否显示。该属性只适用于边框分离模式（border-collapse: separate）下的表格。

语法

empty-cells: show | hide | inherit;

属性值

  • show: 默认值，显示空单元格的边框和背景。
  • hide: 隐藏空单元格的边框和背景，使它们看起来像是不存在一样。
  • inherit: 从父元素继承 empty-cells 属性的值。

工作原理

empty-cells 属性只有在表格使用 border-collapse: separate 时才会生效。当设置为 hide 时，空单元格的边框和背景会被隐藏，但单元格本身仍然存在，只是视觉上不可见。

浏览器兼容性

  • 所有现代浏览器（Chrome, Firefox, Safari, Edge）都支持 empty-cells 属性。
  • 该属性在 IE8 及以上版本也得到支持。
  • 注意：在使用 border-collapse: collapse 的表格中，empty-cells 属性不会生效。

实用案例分析

案例一：基本的 empty-cells 控制

场景描述：创建一个表格，展示 empty-cells: show 和 empty-cells: hide 的效果对比。

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>empty-cells 属性示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>empty-cells 属性示例</h1>
    
    <h2>empty-cells: show（默认）</h2>
    <table class="table-show">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>前端开发</td>
                <td>zhangsan@example.com</td>
            </tr>
            <tr>
                <td>李四</td>
                <td></td>
                <td>设计师</td>
                <td></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>30</td>
                <td></td>
                <td>wangwu@example.com</td>
            </tr>
        </tbody>
    </table>
    
    <h2>empty-cells: hide</h2>
    <table class="table-hide">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>前端开发</td>
                <td>zhangsan@example.com</td>
            </tr>
            <tr>
                <td>李四</td>
                <td></td>
                <td>设计师</td>
                <td></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>30</td>
                <td></td>
                <td>wangwu@example.com</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS 样式：

/* 基础表格样式 */
table {
    width: 100%;
    border-collapse: separate; /* 必须设置为 separate 才会生效 */
    border-spacing: 5px;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* empty-cells: show（默认） */
.table-show {
    empty-cells: show;
}

/* empty-cells: hide */
.table-hide {
    empty-cells: hide;
}

效果分析：

  • 第一个表格使用默认的 empty-cells: show，空单元格会显示边框和背景。
  • 第二个表格使用 empty-cells: hide，空单元格的边框和背景会被隐藏，看起来像是不存在一样。
  • 注意：两个表格都使用了 border-collapse: separate，因为 empty-cells 属性只在这种模式下生效。

案例二：带样式的空单元格控制

场景描述：创建一个具有美观样式的表格，并控制空单元格的显示方式。

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带样式的空单元格控制</title>
    <link rel="stylesheet" href="styled-empty-cells.css">
</head>
<body>
    <h1>带样式的空单元格控制</h1>
    
    <table class="styled-table">
        <thead>
            <tr>
                <th>产品</th>
                <th>价格</th>
                <th>库存</th>
                <th>销量</th>
                <th>利润率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>产品 A</td>
                <td>¥100</td>
                <td>50</td>
                <td>20</td>
                <td>25%</td>
            </tr>
            <tr>
                <td>产品 B</td>
                <td>¥200</td>
                <td></td>
                <td>15</td>
                <td></td>
            </tr>
            <tr>
                <td>产品 C</td>
                <td>¥150</td>
                <td>30</td>
                <td></td>
                <td>18%</td>
            </tr>
            <tr>
                <td>产品 D</td>
                <td>¥250</td>
                <td>10</td>
                <td>8</td>
                <td>30%</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS 样式：

/* 基础表格样式 */
.styled-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    empty-cells: hide; /* 隐藏空单元格 */
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.styled-table th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.styled-table td {
    background-color: white;
}

/* 移除最后一列的右边框 */
.styled-table th:last-child,
.styled-table td:last-child {
    border-right: none;
}

/* 交替行颜色 */
.styled-table tbody tr:nth-child(even) td {
    background-color: #f9f9f9;
}

/* 悬停效果 */
.styled-table tbody tr:hover td {
    background-color: #f5f5f5;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .styled-table {
        font-size: 0.9em;
    }
    
    .styled-table th,
    .styled-table td {
        padding: 8px 10px;
    }
}

效果分析：

  • 表格使用了 empty-cells: hide，空单元格的边框和背景被隐藏，使表格看起来更整洁。
  • 表格添加了阴影效果、圆角边框和交替行颜色，提升了视觉效果。
  • 表头使用了深色背景和白色文字，增强了可读性。
  • 表格支持响应式调整，在小屏幕设备上会自动调整字体大小和内边距。

案例三：空单元格与边框合并模式的对比

场景描述：创建两个表格，一个使用 border-collapse: separate 并设置 empty-cells: hide，另一个使用 border-collapse: collapse，对比它们的显示效果。

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空单元格与边框合并模式的对比</title>
    <link rel="stylesheet" href="border-collapse-comparison.css">
</head>
<body>
    <h1>空单元格与边框合并模式的对比</h1>
    
    <h2>border-collapse: separate + empty-cells: hide</h2>
    <table class="table-separate">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>90</td>
                <td>85</td>
                <td>95</td>
                <td>270</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>80</td>
                <td></td>
                <td>85</td>
                <td>165</td>
            </tr>
            <tr>
                <td>王五</td>
                <td></td>
                <td>95</td>
                <td></td>
                <td>95</td>
            </tr>
        </tbody>
    </table>
    
    <h2>border-collapse: collapse（empty-cells 不生效）</h2>
    <table class="table-collapse">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>90</td>
                <td>85</td>
                <td>95</td>
                <td>270</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>80</td>
                <td></td>
                <td>85</td>
                <td>165</td>
            </tr>
            <tr>
                <td>王五</td>
                <td></td>
                <td>95</td>
                <td></td>
                <td>95</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS 样式：

/* 基础表格样式 */
table {
    width: 100%;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* border-collapse: separate + empty-cells: hide */
.table-separate {
    border-collapse: separate;
    border-spacing: 5px;
    empty-cells: hide;
}

/* border-collapse: collapse（empty-cells 不生效） */
.table-collapse {
    border-collapse: collapse;
    empty-cells: hide; /* 这里设置了但不会生效 */
}

效果分析：

  • 第一个表格使用 border-collapse: separate 和 empty-cells: hide，空单元格的边框和背景被隐藏，表格看起来更整洁。
  • 第二个表格使用 border-collapse: collapse，即使设置了 empty-cells: hide，空单元格仍然会显示边框，因为 empty-cells 属性在边框合并模式下不生效。
  • 两个表格的对比清晰地展示了 empty-cells 属性的适用场景和效果。

总结

本教程介绍了 CSS3 的 empty-cells 属性，该属性用于控制表格中空单元格的边框和背景是否显示。主要内容包括：

  1. 基本概念：empty-cells 属性用于控制表格中空单元格的边框和背景显示，只适用于 border-collapse: separate 模式。

  2. 语法：empty-cells: show | hide | inherit;

  3. 属性值：

    • show：显示空单元格的边框和背景（默认值）。
    • hide：隐藏空单元格的边框和背景。
    • inherit：继承父元素的 empty-cells 值。

  4. 工作原理：empty-cells 属性只在表格使用 border-collapse: separate 时才会生效，当设置为 hide 时，空单元格的边框和背景会被隐藏，但单元格本身仍然存在。

  5. 实用案例：

    • 基本的空单元格显示控制。
    • 带样式的空单元格控制，提升表格美观度。
    • 与边框合并模式的对比，展示适用场景。

  6. 浏览器兼容性：

    • 所有现代浏览器都支持 empty-cells 属性。
    • IE8 及以上版本也得到支持。

通过使用 empty-cells 属性，我们可以根据实际需求控制表格中空单元格的显示方式，使表格看起来更整洁美观。特别是在数据表格中，当某些单元格没有数据时，隐藏它们的边框和背景可以提升整体视觉效果。

« 上一篇 CSS3 表格增强 - caption-side 属性 下一篇 » CSS3 表格增强 - table-layout 属性
↑