如何设置HTML表格的行间距？BORDER-SPACING属性调整方案-html教程-PHP中文网

border-spacing的第二个值是行间距（垂直方向），第一个值是列间距（水平方向）；必须配合border-collapse: separate才生效，仅作用于相邻单元格边框之间，不继承、不支持负值或百分比。

如何设置html表格的行间距？border-spacing属性调整方案

border-spacing 的第二个值才是行间距

很多人写 border-spacing: 10px 20px 却发现“行没分开”，其实是把顺序搞反了：**第一个值是列间距（水平），第二个值才是行间距（垂直）**。它控制的是相邻 <tr> 元素上下边框之间的物理间隙，不是 <code><td> 内容之间的距离。 <ul> <li> <code>border-spacing: 0 8px → 列紧贴、行间留出 8px 空隙

border-spacing: 4px 0 → 行紧贴、列间留出 4px 空隙

不能写成 border-spacing: 8px 0 然后指望“第一行下面有 8px”，它作用在所有相邻行之间，包括第 1 和第 2 行、第 2 和第 3 行……

如果表格只有一行，border-spacing 的第二个值不会产生任何可见效果

写了 border-spacing 没反应？先看 border-collapse

border-spacing 生效的前提是 border-collapse: separate，而这个值极容易被覆盖——Bootstrap、Ant Design、甚至一行全局重置 table { border-collapse: collapse; } 都会让它彻底失效。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

必须显式写在 <table> 元素上：<code><table style="border-collapse: separate; border-spacing: 0 6px"> <li>不要只靠源码判断，用 DevTools 的 “Computed” 面板确认 <code>border-collapse 的最终计算值是不是 separate
第三方组件库的表格常默认 collapse，需额外加 CSS 权重覆盖，例如：.my-table { border-collapse: separate !important; }