I currently have a table with my content, but it looks like I want there to be space between each line so that they are clearly separated and look like this
I tried using padding on the td element and border spacing on the tr element. What's the easiest way to do this in bootstrap 5? Below is my HTML and 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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I think you've solved most of your problem, except that since everything is white, it's hard to see that there's space between the lines. Added slight box shadow on rows. I'm not sure how you're using bootstrap here, but I think if you want to override the bootstrap style, it's something like
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; }