html表格单元格间距需通过border-spacing（控制格子间隙）和padding（调整内容距边框距离）实现，伪类仅辅助动态视觉效果；border-spacing在border-collapse:separate时生效，padding作用于td/th，合并单元格时优先用class而非伪类处理。

HTML表格单元格间距不能靠伪类直接控制，关键在于正确使用 border-spacing 和 padding，伪类（如 :hover、:nth-child）只起辅助作用——它们能帮你动态调整特定单元格的内边距或背景，但无法替代基础布局属性。

用 border-spacing 控制单元格之间距离

这是控制表格“格子间隙”的核心属性，作用于 <table> 元素本身，且仅在 <code>border-collapse: separate（默认值）时生效：

• 设置水平与垂直间距： border-spacing: 8px 4px;（先水平后垂直）
• 单值写法统一所有方向：border-spacing: 6px;
• 若已设 border-collapse: collapse，border-spacing 将失效——此时单元格“贴合”，间距归零

用 padding 调整单元格内容离边框的距离

这才是真正影响“视觉间距感”的常用方式，作用于 <td> 和 <code><th>： <ul> <li>统一设置：<code>td, th { padding: 10px 16px; }（上下10px，左右16px）

差异化处理：第一列留白少些，操作列加右边距，例如 td:first-child { padding-left: 6px; }

响应式微调：@media (max-width: 768px) { td, th { padding: 6px 10px; } }

伪类配合实现动态间距效果

伪类不改变物理间距，但可通过 padding 或 transform 制造“视觉呼吸感”：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 悬停放大+内边距微调：td:hover { padding: 12px 18px; background: #f5f5f5; }
• 隔行变色时微调偶数行内边距：tr:nth-child(even) td { padding-top: 9px; padding-bottom: 9px; }
• 首行表头加顶部留白：thead tr th { padding-top: 14px; }

合并单元格时的间距处理技巧

当使用 colspan 或 rowspan 后，border-spacing 仍生效，但 padding 需单独定义：

• 合并后的 <td colspan="2"> 仍继承通用 <code>padding 规则
• 如需区别对待，可加 class：<td class="wide-cell" colspan="2">，再写 <code>.wide-cell { padding: 12px 24px; }
• 避免用伪类选中合并单元格——:nth-child 在跨列时容易错位，优先用 class 或属性选择器

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！