使用border-collapse:separate时如何移除HTML表格首行上方间距？

方法1：利用border-spacing + 负边距抵消首行上方间距 #

保留border-collapse: separate，通过表格负上外边距抵消首行上方的间距，同时给每行单元格添加圆角样式：

table {
  border-collapse: separate;
  border-spacing: 0 10px; /* 控制行与行的垂直间距 */
  margin-top: -10px; /* 抵消首行上方的多余间距 */
  width: 100%;
}

tr {
  background-color: #fff; /* 给行加背景，凸显圆角效果 */
}

td {
  border: 1px solid #e0e0e0;
  padding: 12px 16px;
}

/* 给每行的单元格设置圆角 */
tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

方法2：用div模拟卡片式行（更灵活） #

如果不需要严格的表格语义化，可改用div实现独立圆角行，彻底规避表格边框限制：

<div class="table-wrap">
  <div class="table-row">
    <div class="cell">内容1</div>
    <div class="cell">内容2</div>
  </div>
  <div class="table-row">
    <div class="cell">内容3</div>
    <div class="cell">内容4</div>
  </div>
</div>

.table-wrap {
  width: 100%;
}

.table-row {
  display: flex;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 10px; /* 行间距 */
  background-color: #fff;
}

.table-row:last-child {
  margin-bottom: 0;
}

.cell {
  flex: 1;
  padding: 12px 16px;
}

关键说明 #

• 方法1保留表格语义化，适合依赖表格布局特性的场景，负边距仅抵消首行上方空间，不影响行之间的间距。
• 方法2视觉自由度更高，无需处理表格边框的兼容性问题，适合追求卡片式效果的场景。

内容的提问来源于stack exchange，提问作者Jurgita-ds