本文介绍在无法修改 HTML 结构的前提下，通过纯 CSS 重置表格默认渲染行为（如 border-spacing 和 td 内边距），消除 中首个 自动产生的顶部空白，同时保持文本“xyz”位于表格正下方而非右侧。

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

` 中首个 `` 自动产生的顶部空白，同时保持文本“xyz”位于表格正下方而非右侧。

默认情况下，HTML 表格（<table>）作为块级元素插入到 <code><li> 中时，其顶部常会出现一段不可见但实际存在的空白间隙。这并非来自外边距（margin），而是源于浏览器对表格的默认渲染机制：border-spacing（表元间距）和 <td> 元素默认的 <code>padding 共同作用，叠加在表格的行盒（line box）布局中，导致表格与前序内容（如换行符或空格）之间产生视觉错位。

直接使用 display: inline-table 虽可缩小间隙，但会破坏文档流——使后续内联文本（如示例中的 xyz）与表格并排显示，违背“表格在上、文本在下”的语义布局需求。

✅ 正确解法是重构表格的显示模型，使其脱离传统表格布局约束，转为更可控的块级+内联块组合：

table,
tr {
  display: block;
  border-spacing: 0; /* 显式清除，避免继承或 UA 样式干扰 */
}
td {
  display: inline-block;
  padding: 0;         /* 消除单元格默认内边距 */
  vertical-align: top; /* 可选：确保多行 td 垂直对齐一致 */
}

该方案将 <table> 和 <code><tr> 视为普通块容器，消除了表格特有的行间计算逻辑；而 <code><td> 改为 <code>inline-block 后，既能水平排列（模拟列效果），又保留独立盒模型，不受 border-spacing 影响。所有样式均通过 CSS 选择器精准作用于表格结构，完全无需改动原始 HTML。

⚠️ 注意事项：

• 此方法适用于展示型表格（无复杂合并单元格 rowspan/colspan 场景）；若存在跨行/跨列，需额外处理 inline-block 的对齐兼容性；
• 若需保留表格语义（如无障碍访问），建议配合 role="presentation" 或 ARIA 属性增强可访问性；
• 所有样式应置于 <style></style> 标签或外部 CSS 中，并确保选择器权重足够覆盖用户代理样式。

最终效果：第二个 <li> 中的表格紧贴列表项起始位置，“xyz”文本自然换行至表格正下方，整体视觉节奏与第一项“list item one”高度一致，实现无缝排版统一。