CSS 表格
03-css2026/11/14
CSS 表格指的是使用 CSS 来样式化 HTML 中的 <table> 元素及其相关子元素（<tr>, <td>, <th> 等）。通过 CSS，你可以极大地改善表格的默认外观，使其更美观、更易读、更专业。
HTML 表格结构回顾
<table>
<thead>
<!-- 表头 -->
<tr>
<!-- 表头行 -->
<th>姓名</th>
<!-- 表头单元格 -->
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<!-- 表格主体 -->
<tr>
<!-- 数据行 -->
<td>张三</td>
<!-- 数据单元格 -->
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
<tfoot>
<!-- 表脚 -->
<tr>
<td colspan="3">总计：2 人</td>
</tr>
</tfoot>
</table>
核心 CSS 表格属性
1. border - 边框（基础）
设置表格及其单元格的边框。
table {
border: 1px solid #ccc; /* 为整个表格设置边框 */
}
th,
td {
border: 1px solid #ddd; /* 为每个单元格设置边框 */
padding: 8px; /* 添加内边距，让内容不紧贴边框 */
}
2. border-collapse - 边框合并
这是最重要的表格属性之一，决定表格边框是分开的还是合并的。
table {
border-collapse: collapse; /* 合并相邻边框（推荐） */
/* border-collapse: separate; */ /* 默认值，边框分开 */
}
解释：
separate：双线边框效果，单元格之间有间隙collapse：单线边框效果，更现代、更简洁
3. border-spacing - 边框间距
当 border-collapse: separate; 时，此属性设置相邻单元格边框间的距离。
table {
border-collapse: separate;
border-spacing: 10px; /* 水平和垂直间距都是10px */
border-spacing: 5px 10px; /* 水平5px，垂直10px */
}
4. empty-cells - 空单元格显示
当 border-collapse: separate; 时，控制空单元格的边框和背景是否显示。
table {
border-collapse: separate;
empty-cells: hide; /* 隐藏空单元格的边框和背景 */
/* empty-cells: show; */ /* 默认值，显示空单元格 */
}
5. table-layout - 表格布局算法
控制表格单元格、行和列的布局算法。
table {
table-layout: fixed; /* 固定布局，列宽由表格宽度和列宽设置决定 */
/* table-layout: auto; */ /* 默认值，自动布局，根据内容计算列宽 */
width: 100%; /* 配合 fixed 使用效果更好 */
}
解释：
- auto：浏览器根据内容自动计算列宽（可能性能较差）
- fixed：列宽由表格宽度和列宽设置决定，渲染速度更快