Collapse table

Bootstrap 5 Collapse table component

Responsive collapse table built with Bootstrap 5. Create intuitive, user-friendly tables that expand and collapse for efficient data presentation.

Basic example

Click + below to show and hide the table content.

# Heading Heading Heading
label
value 1
label
value 2
label
value 3
label
value 4
label
value
label
value
label
value
label
value
Edit in sandbox 
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr class="accordion-toggle collapsed"
        id="accordion1"
        data-mdb-collapse-init
        data-mdb-parent="#accordion1"
        href="#collapseOne"
        aria-controls="collapseOne"
      >
        <td class="expand-button"></td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>

      </tr>
      <tr class="hide-table-padding">
        <td></td>
        <td colspan="3">
          <div id="collapseOne" class="collapse in p-3">
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value 1</div>
            </div>
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value 2</div>
            </div>
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value 3</div>
            </div>
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value 4</div>
            </div>
          </div></td>
      </tr>
      <tr class="accordion-toggle collapsed"
        id="accordion2"
        data-mdb-collapse-init
        data-mdb-parent="#accordion2"
        href="#collapseTwo"
        aria-controls="collapseTwo"
      >
        <td class="expand-button"></td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr class="hide-table-padding">
        <td></td>
        <td colspan="4">
          <div id="collapseTwo" class="collapse in p-3">
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value</div>
            </div>
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value</div>
            </div>
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value</div>
            </div>
            <div class="row">
              <div class="col-2">label</div>
              <div class="col-6">value</div>
            </div>
          </div></td>
      </tr>
    </tbody>
  </table>
</div>
tr.hide-table-padding td {
  padding: 0;
  }

  .expand-button {
    position: relative;
  }

  .accordion-toggle .expand-button:after
  {
    position: absolute;
    left:.75rem;
    top: 50%;
    transform: translate(0, -50%);
    content: '-';
  }
  .accordion-toggle.collapsed .expand-button:after
  {
    content: '+';
  }