Tables

Documentation and examples for opt-in styling of tables with Falcon.

Tables on Bootstrap
Basic Table

Using the most basic table markup, here’s how .table based tables look in Bootstrap.

Name Email Actions
Ricky Antony ricky@example.com
Emma Watson emma@example.com
Rowen Atkinson rown@example.com
Antony Hopkins antony@example.com
Jennifer Schramm jennifer@example.com 
<div class="table-responsive scrollbar">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Antony Hopkins</td>
        <td>antony@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Striped

Use .table-striped to add zebra-striping to any table row within the tbody.

Name Email Actions
Ricky Antony ricky@example.com
EditDelete
Emma Watson emma@example.com
EditDelete
Rowen Atkinson rown@example.com
EditDelete
Antony Hopkins antony@example.com
EditDelete
Jennifer Schramm jennifer@example.com
EditDelete
 
<div class="table-responsive scrollbar">
  <table class="table table-striped overflow-hidden">
    <thead>
      <tr class="btn-reveal-trigger">
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="btn-reveal-trigger">
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Antony Hopkins</td>
        <td>antony@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Dark

Using the most basic table markup, here’s how .table-dark based tables look in Bootstrap.

Name Email
Ricky Antony ricky@example.com
Emma Watson emma@example.com
Rowen Atkinson rown@example.com
Antony Hopkins antony@example.com
Jennifer Schramm jennifer@example.com 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
Hoverable Rows
Name Email joined
Ricky Antony
 ricky@example.com
30/03/2018
Emma Watson
 emma@example.com
11/07/2017
RA
Rowen Atkinson
 rown@example.com
05/04/2016
Antony Hopkins
 antony@example.com
05/04/2018
Jennifer Schramm
 jennifer@example.com
17/03/2016 
<div class="table-responsive scrollbar">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col"> </th>
        <th scope="col">joined</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
            </div>
            <div class="ms-2">Ricky Antony</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">ricky@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">30/03/2018</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
            </div>
            <div class="ms-2">Emma Watson</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">emma@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">11/07/2017</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <div class="avatar-name rounded-circle"><span>RA</span></div>
            </div>
            <div class="ms-2">Rowen Atkinson</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">rown@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">05/04/2016</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
            </div>
            <div class="ms-2">Antony Hopkins</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">antony@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">05/04/2018</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
            </div>
            <div class="ms-2">Jennifer Schramm</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">jennifer@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-tertiary pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-tertiary ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">17/03/2016</td>
      </tr>
    </tbody>
  </table>
</div>
Bordered tables

Add .table-bordered for borders on all sides of the table and cells.

Name Email
Ricky Antony ricky@example.com
Emma Watson emma@example.com
Rowen Atkinson rown@example.com
Antony Hopkins antony@example.com
Jennifer Schramm jennifer@example.com 
<table class="table table-bordered">
  <thead class="table-dark">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
Captions
List of Users
Name Email
Ricky Antony ricky@example.com
Emma Watson emma@example.com
Rowen Atkinson rown@example.com
Antony Hopkins antony@example.com
Jennifer Schramm jennifer@example.com 
<table class="table">
  <caption>List of Users</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
Small Tables

Add .table-sm to make any .table more compact by cutting all cell padding in half.

Name Email
Ricky Antony ricky@example.com
Emma Watson emma@example.com
Rowen Atkinson rown@example.com
Antony Hopkins antony@example.com
Jennifer Schramm jennifer@example.com
Mizan Rifat mizan@example.com
Tony Robbins tony@example.com 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
    <tr>
      <td>Mizan Rifat</td>
      <td>mizan@example.com</td>
    </tr>
    <tr>
      <td>Tony Robbins</td>
      <td>tony@example.com</td>
    </tr>
  </tbody>
</table>
Highlight Column
Name Email Actions
Ricky Antony ricky@example.com
EditDelete
Emma Watson emma@example.com
EditDelete
Rowen Atkinson rown@example.com
EditDelete
Antony Hopkins antony@example.com
EditDelete
Jennifer Schramm jennifer@example.com
EditDelete
 
<div class="table-responsive scrollbar">
  <table class="table table-bordered overflow-hidden">
    <colgroup>
      <col class="bg-primary-subtle" />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr class="btn-reveal-trigger">
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="btn-reveal-trigger">
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Antony Hopkins</td>
        <td>antony@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs-10"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Active Table

Highlight a table row or cell by adding a .table-active class.

Name Email Actions
Ricky Antony ricky@example.com
Emma Watson emma@example.com
Rowen Atkinson rown@example.com
Antony Hopkins antony@example.com
Jennifer Schramm jennifer@example.com 
<div class="table-responsive scrollbar">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr class="table-active">
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Antony Hopkins</td>
        <td class="table-active">antony@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div><button class="btn btn-link p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn btn-link p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Variants

Use contextual classes to color tables, table rows or individual cells.

Name Email
Ricky Antony ricky@example.com
Emma Watson emma@example.com
Rowen Atkinson rown@example.com
Antony Hopkins antony@example.com
Jennifer Schramm jennifer@example.com 
<table class="table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr class="table-secondary">
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr class="table-success">
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr class="table-danger">
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr class="table-warning">
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
Responsive Table

Use .table-responsive for horizontally scrolling tables.And use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint

Name Email Phone Address Status Amount
Ricky Antony
 ricky@example.com (201) 200-1851 2392 Main Avenue, Penasauka Completed $99
Emma Watson
 emma@example.com (212) 228-8403 2289 5th Avenue, New York Completed $199
RA
Rowen Atkinson
 rown@example.com (201) 200-1851 112 Bostwick Avenue, Jersey City Processing $755
Antony Hopkins
 antony@example.com (901) 324-3127 3448 Ile De France St #242 On Hold $50
Jennifer Schramm
 jennifer@example.com (828) 382-9631 659 Hannah Street, Charlotte Pending $150 
<div class="table-responsive scrollbar">
  <table class="table table-hover table-striped overflow-hidden">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Phone</th>
        <th scope="col">Address</th>
        <th scope="col">Status</th>
        <th class="text-end" scope="col">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
            </div>
            <div class="ms-2">Ricky Antony</div>
          </div>
        </td>
        <td class="text-nowrap">ricky@example.com</td>
        <td class="text-nowrap">(201) 200-1851</td>
        <td class="text-nowrap">2392 Main Avenue, Penasauka</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$99</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
            </div>
            <div class="ms-2">Emma Watson</div>
          </div>
        </td>
        <td class="text-nowrap">emma@example.com</td>
        <td class="text-nowrap">(212) 228-8403</td>
        <td class="text-nowrap">2289 5th Avenue, New York</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$199</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <div class="avatar-name rounded-circle"><span>RA</span></div>
            </div>
            <div class="ms-2">Rowen Atkinson</div>
          </div>
        </td>
        <td class="text-nowrap">rown@example.com</td>
        <td class="text-nowrap">(201) 200-1851</td>
        <td class="text-nowrap">112 Bostwick Avenue, Jersey City</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-primary">Processing<span class="ms-1 fas fa-redo" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$755</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
            </div>
            <div class="ms-2">Antony Hopkins</div>
          </div>
        </td>
        <td class="text-nowrap">antony@example.com</td>
        <td class="text-nowrap">(901) 324-3127</td>
        <td class="text-nowrap">3448 Ile De France St #242</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-secondary">On Hold<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$50</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
            </div>
            <div class="ms-2">Jennifer Schramm</div>
          </div>
        </td>
        <td class="text-nowrap">jennifer@example.com</td>
        <td class="text-nowrap">(828) 382-9631</td>
        <td class="text-nowrap">659 Hannah Street, Charlotte</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$150</td>
      </tr>
    </tbody>
  </table>
</div>

Thank you for creating with Falcon |
2024 © Themewagon

v3.22.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize