How can I add margin to Bootstrap table rows?

user_1521218 0
Viewed 262

in a striped table I want to add extra space between two rows without the strip color change. After the 1st sum row I need an extra space before the 2nd data block starts. Unfortunately the mb-3 wont work on the tr element. What is the good solution for a problem like this?

<table class="table table-striped">
  <tr class="mb-3">

Thanks for your suggestions! Code sample can be found: https://www.codeply.com/p/kU5U99YOKU

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table table-striped">
  <thead>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
    <!-- as the mb-3 wont work I added this but this is wrong -->
    <tr>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
</table>

bootstrap-4 html-table css html
1 Answers

You could use multiple tbody elements, which may be a more semantically correct approach. Use borders as spacers:

tbody {
  border-bottom: 20px solid pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table table-striped">
  <thead>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
</table>

Your strategy of using spacer rows can work, but you'll want to hide them from assistive technology using aria-hidden attributes:

.spacer td {
  background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table table-striped">
  <thead>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
    <tr class="spacer" aria-hidden="true">
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
    <tr class="spacer" aria-hidden="true">
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
    <tr class="spacer" aria-hidden="true">
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
</table>

user_12648040
Related