使用 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