我目前有一个包含我的内容的表格，但它看起来像 我希望每行之间都有空间，使它们明显分开，看起来像这样
我尝试在 td 元素上使用填充，并在 tr 元素上使用边框间距。在 bootstrap 5 中执行此操作的最简单方法是什么？下面是我的 HTML 和 CSS
.icon-green {
color: green;
}
table {
border-collapse: separate;
border-spacing: 0 15px;
}
th,
td {
text-align: center;
vertical-align: middle;
padding: 5px;
}
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
我认为您已经解决了自己的大部分问题，除了因为一切都是白色的，所以很难看到行之间有空间。在行上添加了轻微的框阴影。我不确定你在这里如何使用引导程序，但我认为如果你想覆盖引导程序样式，它是类似的
table { border-collapse: separate; border-spacing: 0px 15px; } tr{ /* only added this line */ box-shadow:0px 1px 2px 3px rgba(0, 0, 0, 0.142); } th, td { width:100%; background-color:white; text-align: center; vertical-align: middle; padding: 5px; }