本文介绍在无法修改 HTML 结构的前提下，通过纯 CSS 重置表格显示模式（display: block + inline-block），消除 中首个 自带的默认外边距与单元格间距，确保后续文本（如 "xyz"）自然位于表格正下方。

本文介绍在无法修改 html 结构的前提下，通过纯 css 重置表格显示模式（`display: block` + `inline-block`），消除 `

` 中首个 `` 自带的默认外边距与单元格间距，确保后续文本（如 "xyz"）自然位于表格正下方。

默认情况下，<table> 是块级元素，但其内部渲染机制（如 <code>border-spacing、td 的默认 padding 和 display: table-cell）会在视觉上产生不可见的垂直空白，尤其当它作为 <li> 的第一个子元素时，常表现为表格“悬浮”于列表项基线之上，导致紧随其后的纯文本（如示例中的 xyz）与表格底部出现意外间隙。

直接使用 display: inline-table 并不可取——它会将表格变为行内级容器，使后续文本 xyz 与其并排显示，违背“表格在上、文本在下”的语义布局需求。

✅ 推荐解决方案：语义化重构表格的显示行为
不依赖 table 的原生布局模型，而是将其降级为普通块级容器，再由 td 承担对齐职责：

/* 将 table 和 tr 视为普通块容器，消除 border-spacing 影响 */
table,
tr {
  display: block;
  border-spacing: 0; /* 显式重置，增强兼容性 */
}

/* td 改为 inline-block，实现横向排列且无默认 padding 干扰 */
td {
  display: inline-block;
  padding: 0;
  vertical-align: top; /* 防止因行高差异导致错位 */
}

该方案优势显著：

• ✅ 完全保留原始 HTML 结构，无需添加 class 或 wrapper；
• ✅ xyz 文本自动换行至表格下方，符合预期流式布局；
• ✅ 单元格内容左对齐、顶部对齐，视觉一致性高；
• ✅ 兼容所有现代浏览器（包括 Safari 15.4+、Chrome 100+、Firefox 91+）。

⚠️ 注意事项：

• 此方法会放弃原生表格的列对齐能力（如多行中同一列自动等宽），若需严格列对齐，应配合 width 或 CSS Grid 替代方案；
• 若表格含 th 或 colgroup，需同步添加 th { display: inline-block; padding: 0; }；
• 如需响应式支持，可在 td 上添加 box-sizing: border-box 并结合 max-width 控制溢出。

综上，当面对受限 HTML 环境下的表格布局微调问题时，主动“解构”表格的默认显示逻辑，比强行 hack 外边距更稳健、可维护性更强。