How to add space between two bootstrap table rows?
I need somehow like:
---------
| A B |
---------
---------
| C D |
---------
---------
| E F |
---------
See Code:
<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>
The styles
border-collapse: separate;
andborder-spacing:0 20px;
will work when I add the classtable-bordered
in the table, by that I will get a line between two columns which I don't need!
Set border-collapse
and border-spacing
...
.table {
border-collapse: separate;
border-spacing:0 20px;
}