Does anyone know how to achieve this style using bootstrap 5?
https://i.sstatic.net/BKDBy.png
The table has space between the rows and a border around the rows, but no border between the columns. I've been attempting to recreate it for 4 hours without success.
Here is my current code:
<style>
.giro-table{
border-collapse: separate;
border-spacing:0 15px;
}
.giro-table
.giro-table tr{border:1px solid #A8A8AD;}
.giro-table th{background:#A8A8AD;}
.giro-table td{padding:20px;}
</style>
<table class="table table-striped table-hover giro-table table-bordered" style="max-width:700px;margin:0 auto;">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>@twitter</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td>@twitter</td>
</tr>
<tr>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
<td>@twitter</td>
</tr>
</tbody>
</table>