掌握 border-collapse 和 border-spacing 属性，精确控制表格边框的合并与间距
理解 table-layout 的 auto 与 fixed 模式差异，优化长内容表格的渲染性能
学会使用 caption-side 和 empty-cells 属性调整表格标题位置及空单元格显示策略
能够编写语义化且美观的表格代码，提升数据展示的可读性与专业度
熟悉表格样式的最佳实践，避免常见的布局塌陷与对齐问题
HTML 表格是展示结构化数据（如财务报表、课程表、对比参数）的传统且有效的方式。然而，默认的 HTML 表格样式通常简陋且缺乏可读性。CSS 赋予了开发者强大的能力，可以完全重塑表格的外观，包括边框风格、单元格间距、对齐方式以及交互效果。
一个标准的表格结构包含：
<table>: 表格容器
<thead> / <tbody> / <tfoot>: 语义化分区（推荐使用）
<tr>: 表格行
<th>: 表头单元格（默认加粗居中）
<td>: 数据单元格
通过 CSS，我们可以将这些基础元素转化为现代、响应式的数据展示组件。
border 属性用于定义表格及其单元格的边框宽度、样式和颜色。默认情况下，如果不设置边框，表格线是不可见的。
关键点：
需要同时为 table, th, td 设置边框，否则会出现边框断裂。
常用样式为实线 (solid) 配合浅灰色或品牌色。
代码示例：基础边框样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 表格边框</title>
<style>
table {
width: 60%;
margin: 20px auto;
}
th, td {
/* 为每个单元格添加蓝色实线边框 */
border: 1.5px solid #0056b3;
padding: 10px;
text-align: center;
}
th {
background-color: #e6f0ff;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>101</td>
<td>张三</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
</tr>
</table>
</body>
</html>
这是表格样式中最关键的属性之一。它决定了相邻单元格的边框是合并为一条线，还是保持独立的双线效果。
collapse: 合并边框。相邻单元格共享一条边框，表格看起来更紧凑、现代（最常用）。
separate: 分离边框。每个单元格拥有独立的边框，单元格之间会有间隙（默认值）。
代码示例：合并 vs 分离
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框合并对比</title>
<style>
.demo-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
table {
margin: 10px;
border: 1.5px solid #0056b3;
}
th, td {
border: 1.5px solid #0056b3;
padding: 8px;
text-align: center;
}
/* 合并模式 */
.collapse-table {
border-collapse: collapse;
}
/* 分离模式 */
.separate-table {
border-collapse: separate;
}
</style>
</head>
<body>
<div class="demo-container">
<div>
<h4>border-collapse: collapse (推荐)</h4>
<table class="collapse-table">
<tr><th>学号</th><th>姓名</th></tr>
<tr><td>1</td><td>张三</td></tr>
</table>
</div>
<div>
<h4>border-collapse: separate</h4>
<table class="separate-table">
<tr><th>学号</th><th>姓名</th></tr>
<tr><td>1</td><td>张三</td></tr>
</table>
</div>
</div>
</body>
</html>
当 border-collapse 设置为 separate 时，border-spacing 属性用于控制单元格之间的间距。
单值: 同时设置水平和垂直间距（如 10px）。
双值: 第一个值为水平间距，第二个值为垂直间距（如 10px 20px）。
注意: 如果 border-collapse 为 collapse，此属性无效。
代码示例：不同间距设置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框间距</title>
<style>
table {
border-collapse: separate; /* 必须设置为 separate */
border: 1.5px solid #0056b3;
margin-bottom: 20px;
}
th, td {
border: 1.5px solid #0056b3;
padding: 8px;
text-align: center;
}
/* 均匀间距 */
.spacing-uniform {
border-spacing: 10px;
}
/* 非均匀间距：水平 10px, 垂直 30px */
.spacing-custom {
border-spacing: 10px 30px;
}
</style>
</head>
<body>
<h4>均匀间距 (10px)</h4>
<table class="spacing-uniform">
<tr><th>学号</th><th>姓名</th></tr>
<tr><td>1</td><td>张三</td></tr>
</table>
<h4>自定义间距 (水平 10px, 垂直 30px)</h4>
<table class="spacing-custom">
<tr><th>学号</th><th>姓名</th></tr>
<tr><td>1</td><td>张三</td></tr>
</table>
</body>
</html>
<caption> 标签用于定义表格标题。caption-side 属性控制标题显示在表格的上方还是下方。
top: 标题位于表格上方（默认）。
bottom: 标题位于表格下方。
代码示例：标题位置调整
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题位置</title>
<style>
table {
border-collapse: separate;
border-spacing: 10px;
border: 1.5px solid #0056b3;
margin: 20px auto;
width: 50%;
}
th, td {
border: 1.5px solid #0056b3;
padding: 8px;
text-align: center;
}
caption {
font-weight: bold;
font-size: 1.1em;
color: #2e7d32;
margin: 10px 0;
}
.caption-top {
caption-side: top;
}
.caption-bottom {
caption-side: bottom;
}
</style>
</head>
<body>
<table class="caption-top">
<caption>员工名单 (顶部标题)</caption>
<tr><th>工号</th><th>姓名</th></tr>
<tr><td>001</td><td>王五</td></tr>
</table>
<table class="caption-bottom">
<caption>员工名单 (底部标题)</caption>
<tr><th>工号</th><th>姓名</th></tr>
<tr><td>001</td><td>王五</td></tr>
</table>
</body>
</html>
当表格中存在没有内容的 <td> 时，empty-cells 属性决定 whether 显示其边框和背景。
show: 显示空单元格的边框和背景（默认）。
hide: 隐藏空单元格的边框和背景，使其看起来像不存在一样。
注意: 仅在 border-collapse: separate 模式下有效。
代码示例：隐藏空单元格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>空单元格处理</title>
<style>
table {
border-collapse: separate;
border-spacing: 10px;
border: 1.5px solid #0056b3;
margin: 20px auto;
}
th, td {
border: 1.5px solid #0056b3;
padding: 8px;
text-align: center;
width: 80px;
}
.hide-empty {
empty-cells: hide;
}
.show-empty {
empty-cells: show;
}
</style>
</head>
<body>
<h4>empty-cells: hide (隐藏空缺)</h4>
<table class="hide-empty">
<tr><th>项目</th><th>进度</th></tr>
<tr><td>设计</td><td>100%</td></tr>
<tr><td>开发</td><td></td></tr> <!-- 空单元格 -->
</table>
<h4>empty-cells: show (显示空缺)</h4>
<table class="show-empty">
<tr><th>项目</th><th>进度</th></tr>
<tr><td>设计</td><td>100%</td></tr>
<tr><td>开发</td><td></td></tr> <!-- 空单元格 -->
</table>
</body>
</html>
table-layout 属性定义了浏览器计算列宽的算法，对性能和大表格渲染至关重要。
auto (默认): 浏览器根据单元格内容的最宽项自动调整列宽。如果内容很长，表格可能会被撑得很宽，甚至导致布局溢出。
fixed: 列宽由表格宽度和第一行（或 <col> 定义）决定，不依赖内容。内容过长时会强制换行或隐藏（取决于 overflow）。性能更好，因为浏览器只需渲染第一行即可确定布局。
代码示例：Auto vs Fixed
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格布局算法</title>
<style>
.comparison {
display: flex;
gap: 20px;
align-items: flex-start;
}
table {
width: 200px; /* 固定表格总宽 */
border-collapse: collapse;
border: 1.5px solid #0056b3;
margin-top: 10px;
}
th, td {
border: 1.5px solid #0056b3;
padding: 5px;
word-break: break-all; /* 允许长单词换行以便观察效果 */
}
/* 自动布局：列宽由内容决定，可能超出表格设定宽度 */
.layout-auto {
table-layout: auto;
background-color: #fffde7;
}
/* 固定布局：列宽平均分配或按第一行比例，内容强制适应 */
.layout-fixed {
table-layout: fixed;
background-color: #e3f2fd;
}
</style>
</head>
<body>
<div class="comparison">
<div>
<h4>table-layout: auto</h4>
<p>列宽被长内容撑开，忽略表格宽度限制。</p>
<table class="layout-auto">
<tr><th>ID</th><th>描述信息</th></tr>
<tr><td>1</td><td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td></tr>
</table>
</div>
<div>
<h4>table-layout: fixed</h4>
<p>列宽固定，长内容自动换行，保持表格整洁。</p>
<table class="layout-fixed">
<tr><th>ID</th><th>描述信息</th></tr>
<tr><td>1</td><td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td></tr>
</table>
</div>
</div>
</body>
</html>
优先使用 border-collapse: collapse: 除非有特殊设计需求（如卡片式表格），否则合并边框能让表格看起来更专业、紧凑。
大数据量表格使用 table-layout: fixed: 当表格行数众多或列内容长度不可控时，固定布局能显著提升渲染速度，防止页面抖动。
合理使用 nth-child 增强可读性: 结合 CSS 伪类为奇偶行设置不同背景色（斑马纹），可大幅提升长表格的阅读体验。
响应式处理: 在小屏幕设备上，考虑将表格转换为卡片布局或使用横向滚动 (overflow-x: auto)，避免破坏移动端布局。
为什么在使用 border-spacing 属性时，必须将 border-collapse 设置为 separate？如果两者冲突，浏览器会如何处理？
在一个包含大量数据（例如 1000 行）的后台管理表格中，你会选择 table-layout: auto 还是 fixed？请从渲染性能和用户体验两个角度阐述理由。
如果需要实现“斑马纹”效果（即奇数行和偶数行背景色不同），应该使用哪个 CSS 选择器？请写出相应的 CSS 代码片段。