Space between table rows with black border

Question

I have a table in which I want space between rows and a black border around each row

.table {
  border-collapse: collapse !important;
  border-spacing: 0 5px !important;
}

.table tr {
  border: 1px solid #000 !important;
}

<table class="table table-borderless">
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td><a href="#"><i class="fas fa-edit"></i></a></td>
      <td><a href="#"><i class="fas fa-trash"></i></a></td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td><a href="#"><i class="fas fa-edit"></i></a></td>
      <td><a href="#"><i class="fas fa-trash"></i></a></td>
    </tr>
  </tbody>
</table>

border-collapse = collapse : Each row has a black border but no space between rows

border-collapse = separate : The are space between rows but no black border around each row

if I remove border-collapse from css, it behaves exactly like the first image. How can I combine the two together ?

score 1 · Accepted Answer · answered Dec 24 '20 at 20:02

Will this be ok?

.table {
  border-collapse: collapse !important;
  border-spacing: 0 5px !important;
}

.table tr {
  border: 1px solid #000;
}

.spacer { border-left:none !important;  height:20px }

<table class="table table-borderless">
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td><a href="#"><i class="fas fa-edit"></i></a></td>
      <td><a href="#"><i class="fas fa-trash"></i></a></td>
    </tr>
    <tr class="spacer"><td colspan="4"></td></tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td><a href="#"><i class="fas fa-edit"></i></a></td>
      <td><a href="#"><i class="fas fa-trash"></i></a></td>
    </tr>
  </tbody>
</table>

Yes it worked. I had to replace `border-left` to `border` in `spacer` class. Thanks — Amine Messaoudi, Dec 24 '20 at 20:21

Space between table rows with black border

1 Answers1