Erstellen Sie mit HTML und Bootstrap 5 Abstand zwischen Zeilen in der Tabelle

Question

Ich habe derzeit eine Tabelle mit meinen Inhalten, aber es sieht so aus Ich möchte, dass zwischen den einzelnen Reihen Platz ist, damit sie klar voneinander getrennt sind und so aussehen

Ich habe versucht, Polsterung für das td-Element und Randabstände für das tr-Element zu verwenden. Was ist der einfachste Weg, dies in Bootstrap 5 zu tun? Unten ist mein HTML und 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>

Answer 1

我认为您已经解决了自己的大部分问题，除了因为一切都是白色的，所以很难看到行之间有空间。在行上添加了轻微的框阴影。我不确定你在这里如何使用引导程序，但我认为如果你想覆盖引导程序样式，它是类似的

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;
}

Employee ID	Name	Gender	Age
10001	Tom	M	30
10002	Sally	F	28
10003	Emma	F	24