html - 如何在 Bootstrap 表中的带边框的两行之间添加空格

Question

table{ width: 100%;max-width: 100%;  margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;}

tbody tr{border:2px solid #256ac4;}
td{    color: #8d9097; vertical-align: top; font-size: 14px;}
th{text-align:left}

<table>
<thead>
     <th>A</th>
     <th>B</th>
     <th>C</th>
</thead>
<tbody>
  <tr>
    <td>AA</td>
     <td>AA</td>
      <td>AA</td>
  </tr>
 <tr>
    <td>AA</td>
     <td>AA</td>
      <td>AA</td>
  </tr>
 <tr>
    <td>AA</td>
     <td>AA</td>
      <td>AA</td>
  </tr>

</tbody>

</table>

我已经对此进行了编码，预期结果在图像中，但我无法在两行之间添加空间，如果我使用 border-collapse:seperate 那么空间即将出现但边界不适用。

https://ibb.co/b9WDn5

Answer 1

在父表中，尝试设置

border-collapse:separate; 
border-spacing:5em;

尝试引用this .