Bootstrap Table Layout with space between rows with border around it without border between cells-CodePudding

I would like to know if anyone knows how to do the style below using bootstrap 5?

The table has space between the rows and border around this rows, but no border between the columns. I've been trying to recreate it for 4 hours without success.

My code is like that:

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

CodePudding user response：

What classes do you have defined on your table or custom css that could cause this? Looks like you need to remove something.

Take a look at these examples https://getbootstrap.com/docs/5.0/content/tables/

It would be easier to answer if you provided your html.

CodePudding user response：

You need to remove default borders, then you need to set your custom borders.

See comments in the snippet below.

.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;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 !important; /* Remove default borders */
  border-top: 1px solid grey !important; /* Add custom border */
  border-bottom: 1px solid grey !important; /* Add custom border */
}

td:first-child,
th:first-child {
  border-left: 1px solid grey !important; /* Add custom border */
}

td:last-child,
th:last-child {
  border-right: 1px solid grey !important; /* Add custom border */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<table  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>