Cipta ruang antara baris dalam jadual menggunakan HTML dan Bootstrap 5

Question

Saya pada masa ini mempunyai jadual dengan kandungan saya tetapi ia kelihatan seperti Saya mahu ada ruang di antara setiap baris supaya ia dipisahkan dengan jelas dan kelihatan seperti ini

Saya cuba menggunakan padding pada elemen td dan jarak sempadan pada elemen tr. Apakah cara paling mudah untuk melakukan ini dalam bootstrap 5? Di bawah ialah HTML dan CSS

saya

.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

Saya rasa anda telah menyelesaikan kebanyakan masalah anda, kecuali kerana semuanya berwarna putih, sukar untuk melihat bahawa terdapat ruang antara baris. Menambahkan sedikit bayangan kotak pada baris. Saya tidak pasti bagaimana anda menggunakan bootstrap di sini, tetapi saya fikir jika anda ingin mengatasi gaya bootstrap, ia adalah serupa

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