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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }