引导表中两行之间的空间

时间:2019-04-07 12:14:54

标签: html css bootstrap-4 row

如何在两个引导表行之间添加空间?

我需要某种方式:

---------
| A   B |
---------
---------
| C   D |
---------
---------
| E   F |
---------

参见代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-dark">
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>

  

样式border-collapse: separate;border-spacing:0 20px;   当我在表中添加类table-bordered时,它将起作用   我会在不需要的两列之间得到一条线!

1 个答案:

答案 0 :(得分:0)

设置border-collapseborder-spacing ...

.table {
    border-collapse: separate;
    border-spacing:0 20px;
}

enter image description here