本文介绍在无法修改 HTML 结构的前提下，通过纯 CSS 重置表格默认渲染行为（如 border-spacing 和 td 内边距），将 及其子元素转为 block/inline-block 布局，从而精准消除列表项中首个表格上方的意外空白。

本文介绍在无法修改 html 结构的前提下，通过纯 css 重置表格默认渲染行为（如 border-spacing 和 td 内边距），将 `

` 及其子元素转为 block/inline-block 布局，从而精准消除列表项中首个表格上方的意外空白。

默认情况下，HTML 表格会因 border-spacing（单元格间距）和 <td> 元素自带的 <code>padding（通常为 1px）产生不可见但可测量的垂直空白，尤其当表格作为 <li> 的第一个子元素时，该空白会表现为表格“悬浮”于列表文本基线之上，导致视觉错位。

直接使用 display: inline-table 虽能缩小块级间隙，却会引发新的布局问题——后续文本（如示例中的 xyz）将与表格处于同一行内流，违背“表格在上、文字在下”的语义预期。

✅ 推荐解决方案是重构表格的显示模型，绕过传统表格渲染的固有间距机制：

/* 将 table 和 tr 设为块级，消除 border-spacing 影响 */
table,
tr {
  display: block;
  border-spacing: 0; /* 显式重置（尽管对 block 无效，但保持语义清晰） */
}

/* 将 td 设为 inline-block，实现横向排列且无默认 padding */
td {
  display: inline-block;
  padding: 0;
  vertical-align: top; /* 避免基线对齐导致的额外间隙 */
}

该方案的关键优势在于：

• 不依赖 HTML 修改：完全通过 CSS 实现，适配原始结构；
• 保留语义顺序：xyz 文本自然换行至表格下方，符合文档流；
• 可控性强：inline-block 单元格支持精确宽度、间距及对齐控制；
• 兼容性好：display: block 和 inline-block 在所有现代浏览器及 IE9+ 中稳定支持。

⚠️ 注意事项：

• 若表格需响应式或复杂样式（如合并单元格、表头固定），此方案需额外适配（例如用 grid 替代）；
• vertical-align: top 建议显式声明，防止不同字体度量导致的轻微错位；
• 如需保留部分内边距，可对 td 单独设置 padding（如 padding: 4px 8px），而非依赖浏览器默认值。

综上，与其对抗表格默认渲染的“空隙逻辑”，不如主动接管其布局角色——将表格降级为语义容器，用更灵活的 block + inline-block 组合实现像素级对齐，既简洁高效，又具备长期可维护性。