我目前有一個包含我的內容的表格，但它看起來像 我希望每行之間都有空間，使它們明顯分開，看起來像這樣
我嘗試在 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; }