Accordion table

Bootstrap 5 Accordion table component

Accordion tables are a fantastic way to display tabular data in a compact and organized format. You can easily create dynamic and responsive accordion tables to enhance user interaction and data presentation on your site.

Responsive accordion table built with Bootstrap 5. Combine tables with expandable rows for a user-friendly, interactive data display and seamless navigation.

Basic example

# 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: '+';
}