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