如何用HTML和Bootstrap 5实现表格行间距分隔

要实现你想要的行与行之间明显分隔的效果，核心是给表格行添加背景色+调整表格边框间距，结合Bootstrap 5自带类就能快速实现，具体步骤如下：

1. 给表格添加Bootstrap基础类 #

先在<table>标签上加上Bootstrap的table类，继承框架基础样式，避免自定义样式冲突：

<table class="table">
  <tr>
    <th>Employee ID</th>
    <th>Name</th>
    <th>Gender</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>10001</td>
    <td>Tom</td>
    <td>M</td>
    <td>30</td>
  </tr>
  <tr>
    <td>10002</td>
    <td>Sally</td>
    <td>F</td>
    <td>28</td>
  </tr>
  <tr>
    <td>10003</td>
    <td>Emma</td>
    <td>F</td>
    <td>24</td>
  </tr>
</table>

2. 自定义CSS实现间距与分隔 #

Bootstrap默认表格是border-collapse: collapse，需要覆盖该属性，同时设置边框间距，再统一单元格对齐方式：

.icon-green {
  color: green;
}

.table {
  border-collapse: separate;
  border-spacing: 0 15px; /* 上下留15px间距，左右无间距 */
}

.table th,
.table td {
  text-align: center;
  vertical-align: middle;
  padding: 10px; /* 增大内边距让单元格更舒展 */
}

/* 给表格行设置背景色，让间距效果更明显 */
.table tbody tr {
  background-color: #fff;
}

为什么之前的效果不明显？ #

你之前的代码已经设置了border-spacing，但因为表格行没有背景色，页面背景与行背景一致，所以看不到明显分隔。加上白色背景后，行之间的空白间距会清晰显示，完全匹配你期望的效果。

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