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