In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this:
https://i.sstatic.net/ARgR1.png
I experimented with using padding on my td elements and border spacing on my tr elements. What is the simplest way to accomplish this in bootstrap 5? Below you will find my HTML and CSS code:
.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>