Create space between rows in table using HTML and Bootstrap 5

Question

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>

Answer 1

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;
}

Employee ID	Name	Gender	Age
10001	Tom	M	30
10002	Sally	F	28
10003	Emma	F	24