内嵌表格的间距必须单独为每个<table>设置border-collapse和border-spacing，因外层border-spacing仅作用于其直接子<tr>，对作为<td>内容的内嵌表格无效；其border-spacing默认为0，需显式声明才生效。
内嵌表格的间距不能靠外层 border-spacing 控制，必须单独处理每一层 <table> 的 border-collapse 和 border-spacing。
为什么外层 border-spacing 对内嵌表格无效
浏览器只对直接子级 <tr> 应用外层 table 的 border-spacing；内嵌表格是 <td> 的内容，完全脱离外层表格的网格结构。即使外层设了 border-spacing: 12px，内嵌表格的单元格之间仍按它自己的 border-collapse 状态和 border-spacing 计算。
- 内嵌表格默认继承外层的
border-collapse: separate（若未被重置），但它的border-spacing值仍是初始值0，不是外层的值 - 常见误操作：给外层
table写border-spacing: 8px就以为所有子表格都“带上了”，结果内嵌部分密不透风 - DevTools 的 Computed 面板里查内嵌
<table>的border-spacing，大概率显示0px—— 这就是问题根源
怎么给内嵌表格单独设间距
必须显式为每个内嵌 <table> 设置样式，且优先级要高于全局重置（比如 Ant Design 或 Normalize.css 可能已设 table { border-collapse: collapse; }）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 最简写法：
<table style="border-collapse: separate; border-spacing: 6px;"> - 推荐类名控制：
<table class="nested-table">+ CSS：.nested-table { border-collapse: separate; border-spacing: 4px 8px; }（列距 4px，行距 8px） - 如果内嵌表格需紧凑（如数据卡片内部小表），可设
border-collapse: collapse，此时border-spacing自动失效，靠td, th { padding: 4px 8px; }控制呼吸感 - 避免用
cellspacing属性——它在内嵌场景下行为更不可控，且 HTML5 已废弃
嵌套时表头与内容间隙怎么调
内嵌表格的 <thead> 和第一行 <tbody> 之间的空隙，由它自身的 border-spacing 第二个值决定，和外层无关。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：在内嵌
<table>上设border-spacing: 0 10px→ 列无缝、<thead>与首行内容垂直留 10px - 错误做法：给外层
th加padding-bottom或给内嵌td加padding-top，这只会推内容，不改变物理位置，反而导致边框断裂或文字悬浮 - 若内嵌表格无
<thead>，只有普通<tr>，那“表头与内容间隙”就不存在，此时行距由相邻<tr>间的border-spacing垂直值统一控制
真正麻烦的点不在嵌套本身，而在于你很难一眼看出哪一层表格被哪个 CSS 规则覆盖了——尤其是当项目用了 UI 库又没禁用其 table 样式时。border-collapse: collapse 很可能在某个全局文件里悄悄生效，让所有内嵌表格的 border-spacing 彻底静默。调试时务必逐层检查 Computed 面板里的 border-collapse 和 border-spacing 实际值，而不是只看 Styles 面板里写了什么。
