使用 HTML 和 Bootstrap 5 在表格中的行之間建立空間

Question

我目前有一個包含我的內容的表格，但它看起來像 我希望每行之間都有空間，使它們明顯分開，看起來像這樣

我嘗試在 td 元素上使用填充，並在 tr 元素上使用邊框間距。在 bootstrap 5 中執行此操作的最簡單方法是什麼？以下是我的 HTML 和 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

我認為您已經解決了自己的大部分問題，除了因為一切都是白色的，所以很難看到行之間有空間。在行上添加了輕微的框陰影。我不確定你在這裡如何使用引導程序，但我認為如果你想覆蓋引導程式樣式，它是類似的

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