如何用CSS移除相邻HTML表格间距且保留表格与其他元素的外边距（EPUB3场景）

解决方案 #

你可以通过相邻兄弟选择器实现需求，该方案兼容所有EPUB3主流渲染引擎，不需要额外修改HTML结构：

1. 先给所有表格设置默认上下外边距，保证表格和其他非表格元素之间有间距
2. 用table + table选择器选中连续相邻的后续表格，用负边距抵消前序表格的下边距，实现连续表格无缝堆叠

调整后的CSS示例

/* 保留你原有表格的其他样式，仅修改/补充外边距相关规则 */
table {
  /* 上下边距设置为你需要的和段落之间的间距值，可自行调整 */
  margin: 1em 0;
  border-collapse: collapse;
  /* 你的原有样式：比如边框、内边距、宽度等 */
}

/* 连续相邻的表格，取消上下间距 */
table + table {
  /* 数值和上面table设置的margin-top保持一致，抵消前一个表格的下边距 */
  margin-top: -1em;
}

/* 可选：如果你的表格带顶部边框，添加以下规则避免连续表格边框重叠变粗 */
table + table tr:first-child td,
table + table tr:first-child th {
  border-top: none;
}

原外边距不生效的常见原因 #

• 未处理连续表格之间的外边距合并逻辑，单独给table设置的margin会在连续表格之间产生多余间距
• Markdown渲染器自带的默认表格样式优先级高于你写的自定义样式，可通过提高选择器优先级解决（比如你的内容嵌套在.content容器内，就把选择器改成.content table即可）

内容的提问来源于stack exchange，提问作者maxludden