1. 常见的表格行间距问题成因与现象
在前端开发中，表格行间距的稳定呈现常常被浏览器的默认渲染、边框模型和单元格填充所干扰。理解渲染机制是解决问题的第一步，否则即使写再多的CSS也会遇到不可控的竖直间距。下面从两个常见角度展开分析：
边框模型在不同的 border-collapse 设置下对行间距有直接影响。默认情况下，border-collapse: collapse;会让相邻单元格的边框合并，导致看似没有间距；而将其改为 border-collapse: separate;后，行间距就取决于 border-spacing 的设置。若未显式设置，浏览器会回退到一个近似的间距值，导致跨浏览器的视觉不一致。
单元格内填充（padding）和行高（line-height）也会改变行的可视高度。过小的 padding 会让行显得拥挤，过大的 padding 则会让表格显得分散。把 padding 与 line-height 一起考虑，能更精准地控制行间距，从而提升可读性。
1.1 border-collapse 与 border-spacing 的关系
当 table 使用 border-collapse: separate 时，border-spacing 的垂直值决定了相邻行之间的间距，水平值控制列之间的间距。若需要视觉上“空出”行间距，可以将垂直方向的间距设为一定像素。反之，若希望贴近无边框的效果，可以设为 0。
实现要点：统一 border-collapse、统一 border-spacing、以及对所有浏览器应用一致的 box-sizing 与 padding。
1.2 单元格内填充和行高对行间距的影响
单元格 padding 直接改变单行高度，因此对整表的行间距有叠加效果。若需要更稳定的间距，建议统一设置 td/th 的 padding，并在必要时通过 元素级的容器（如 div.wrap）再控制内部间距，以减少对整张表结构的破坏。
在不同字体大小或行高变动时，保持 padding 与 line-height 的比例关系，可以让表格在响应式布局中保持一致的行间距。
2. CSS 解决方案概览
要稳定解决 HTML 表格的行间距问题，核心在于选择合适的边框模型、合理的间距设置以及对单元格内部结构的控制。下面呈现几种常用且有效的思路，便于快速落地到实际项目中。
方案一：使用 border-collapse: separate 与 border-spacing 实现可控间距，是最直接的手段，兼容性良好，且对大多数业务场景足够使用。
方案二：通过在单元格内部再包裹一层容器来控制视觉高度，避免直接修改 tr/td 的 padding，提升对复杂表格的可维护性。
2.1 使用 border-collapse: separate; border-spacing 实现可控间距
这是最推荐的基础做法。通过设置垂直方向的 border-spacing 即可实现跨行的间距，同时通过 padding 保持单元格内容的可读性。
统一的边框和背景策略有助于避免间距处出现色块不一致的情况，尤其在深色主题或有渐变背景的表格中尤为重要。
2.2 通过内嵌容器控制行高与视觉间距
在每个 td 内放置一个 div 作为容器，例如 <div class='cell-wrap'>内容</div>，通过外部容器的 margin/padding 调整行高，而不直接改变单元格本身的 padding。
这种结构化的分层设计使你可以在不破坏表格语义的情况下，灵活控制高度和间距，同时方便未来的样式扩展与主题替换。
2.3 兼容性注意
在旧版本浏览器（如某些老旧的 IE 变体）中，border-spacing 可能表现不完全一致，因此在正式上线前要进行跨浏览器测试。请确保在 CSS 中包含足够的回退和前缀处理，避免因浏览器差异导致的视觉错位。
3. 实战技巧：让表格间距稳定呈现
将前面的原理落地到实际页面中，通常需要结合具体场景进行微调。下面给出对齐、对比度与可读性优化的可执行技巧，帮助你在真实项目中快速落地。
选用一致的字体与字号对齐，能减少由于字体渲染差异引起的视觉错位，从而让行间距看起来更稳定。
统一背景策略，避免边角处的色块，在 border-spacing 产生的间距区域，给表格背景或区块背景设置一致的色值，避免间距处出现不连续的视觉断点。
3.1 使用封装的 CSS 方案实现统一间距
通过一个简洁的 CSS 组合，可以在多张表格上复用，确保间距一致且易于维护。
关键点：将 table 设置为 separate，设置 vertical 的 border-spacing，给 td/ th 设置统一 padding，并在需要时对 tbody 进行分组样式控制。
3.2 使用伪元素实现更柔和的间距效果
一种高级做法是使用伪元素来模拟间距的可控性，例如在 tr 之外附加一个透明的伪行。实际应用需谨慎，避免破坏可访问性与滚动性能。
适用场景：当你需要非常漂亮的分隔感，但又不能大幅改动现有结构时，可以考虑这种伪元素方案作为补充。
3.3 考虑无障碍与可读性
在所有方案中，确保文本可读是第一要务。对比度、聚焦状态与键盘导航应保持一致，并避免使用只通过视觉呈现的间距来传达信息。
4. 代码示例：完整的样式与结构
下面给出一个完整的示例，演示如何在一个简单表格中实现稳定的行间距。你可以直接将代码复制到项目中并按需调整。
示例目标：采用 separate border-collapse、垂直方向的边距以及单元格内的容器来实现整洁的行间距。
以下代码综合了 HTML 结构与 CSS 样式，适用于日常表格页面：
<table class="demo-table"><thead><tr><th>名称</th><th>描述</th><th>数值</th></tr></thead><tbody><tr><td><div class="cell-wrap">项A</div></td><td><div class="cell-wrap">描述文本</div></td><td><div class="cell-wrap">123</div></td></tr><tr><td><div class="cell-wrap">项B</div></td><td><div class="cell-wrap">另一段描述</div></td><td><div class="cell-wrap">456</div></td></tr></tbody>
</table>/* 方案：可控间距的表格样式 */
.demo-table {border-collapse: separate; /* 关键：允许间距生效 */border-spacing: 0 12px; /* 垂直间距 = 12px，水平间距为 0 */width: 100%;background: #fff;border: 1px solid #e2e2e2;
}
.demo-table thead th {text-align: left;padding: 12px 16px;background: #f7f7f7;border-bottom: 0;
}
.demo-table td {padding: 0; /* 让内部容器控制真正间距 */
}
.demo-table .cell-wrap {display: block;padding: 12px 16px; /* 统一行高与内边距，解决视觉拥挤 */border: 1px solid #eee;border-radius: 6px;background: #fff;
}
补充说明：若你希望边框紧跟单元格边界，可以将表格边框设为透明或与单元格边框同色，避免视觉错位。
5. 兼容性与无障碍注意事项
在实现表格行间距时，除了美观，还要关注可访问性与多浏览器兼容性。无障碍性应始终优先，确保屏幕阅读器能够正确解析表格结构，行间距的改动不应破坏语义。
浏览器差异是现实挑战，在生产环境中应进行跨设备测试，必要时提供回退样式。对于极端场景，可以使用条件注释或 CSSHack 针对特定浏览器版本进行微调。
5.1 可访问性与结构语义
表格应保留原生语义：thead、tbody、tfoot 的合理使用，以及单元格中只放置文本或可聚焦元素，避免对屏幕阅读器造成干扰。
在实现行间距时，确保聚焦样式、跳转顺序与键盘导航不被破坏，避免仅靠色彩区分行，以免对视觉受限用户不友好。
5.2 响应式与可维护性
对移动端适配，建议使用相对单位（如 rem、em）来控制字体与间距，保持在不同设备上的一致性。使用可维护的变量与组件化的样式，便于后续主题切换与风格迭代。
