Créer un espace entre les lignes du tableau à l'aide de HTML et Bootstrap 5

Question

J'ai actuellement un tableau avec mon contenu mais il semble que Je veux qu'il y ait un espace entre chaque rangée pour qu'elles soient clairement séparées et ressemblent à ceci

J'ai essayé d'utiliser un remplissage sur l'élément td et un espacement des bordures sur l'élément tr. Quelle est la manière la plus simple de procéder dans bootstrap 5 ? Ci-dessous mon HTML et mon 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

Je pense que tu as résolu la plupart de tes problèmes, sauf que comme tout est blanc, on a du mal à voir qu'il y a de l'espace entre les rangées. Ajout d'une légère ombre de boîte sur les lignes. Je ne sais pas comment vous utilisez bootstrap ici, mais je pense que si vous souhaitez remplacer les styles bootstrap, c'est similaire

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