如何同时实现表格行间距与表格行圆角效果？

嘿，这个坑我之前踩过！确实，直接给<tr>加border-radius根本没用——表格的渲染规则里，<tr>元素本身没法直接承载圆角样式，而且当你用border-collapse: separate来实现行间距时，这个矛盾会更明显。不过别担心，有个既保留原生表格语义，又能同时实现两个效果的方案：

核心思路 #

我们没办法直接给行加圆角，但可以给每行的首尾单元格分别设置左右方向的圆角，再配合border-spacing实现行间距，同时让单元格的背景色统一，看起来就像整行带圆角一样。

完整CSS代码示例 #

/* 基础表格设置：启用行间距 */
table {
  border-collapse: separate;
  border-spacing: 0 1em; /* 垂直方向的行间距，水平设为0避免列间距 */
  width: 100%; /* 可选，让表格占满容器宽度 */
}

/* 表头样式调整 */
th {
  background-color: black;
  color: dimgray;
  padding: 12px 15px; /* 增加内边距让内容更舒展 */
}

/* 内容单元格样式 */
td {
  background-color: #2d2d2d; /* 统一单元格背景，模拟行背景 */
  color: whitesmoke;
  font-weight: bold;
  padding: 12px 15px;
}

/* 给每行的第一个单元格加左圆角 */
tr td:first-child,
tr th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* 给每行的最后一个单元格加右圆角 */
tr td:last-child,
tr th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

为什么这个方案可行？ #

1. border-collapse: separate + border-spacing: 0 1em 完美保留了行与行之间的间距，这部分你之前已经找对方向了。
2. 虽然<tr>不支持圆角，但<td>和<th>是支持的——通过给每行首尾单元格设置对应方向的圆角，再让所有单元格使用统一背景色，视觉上就形成了“整行带圆角”的效果。
3. 调整内边距可以避免内容贴在圆角边缘，让整体样式更美观。

如果需要给 hover 状态加样式，直接给<tr>里的td设置 hover 背景色就行，完全不影响圆角效果~

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