Falcon | Dashboard & Web App Template

Tables

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

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	Edit Delete
Emma Watson	emma@example.com	Edit Delete
Rowen Atkinson	rown@example.com	Edit Delete
Antony Hopkins	antony@example.com	Edit Delete
Jennifer Schramm	jennifer@example.com	Edit Delete

<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	Edit Delete
Emma Watson	emma@example.com	Edit Delete
Rowen Atkinson	rown@example.com	Edit Delete
Antony Hopkins	antony@example.com	Edit Delete
Jennifer Schramm	jennifer@example.com	Edit Delete

<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>

Tables

Basic Table

Striped

Dark

Hoverable Rows

Bordered tables

Captions

Small Tables

Highlight Column

Active Table

Variants

Responsive Table

Settings

Color Scheme

RTL Mode

Fluid Layout

Navigation Position

Vertical Navbar Style

Like What You See?

iPhone

Falcon v1.8.2

Anna Karinina

Antony Hopkins

Emma Watson

Tables

Basic Table

Striped

Dark

Hoverable Rows

Bordered tables

Captions

Small Tables

Highlight Column

Active Table

Variants

Responsive Table

Settings

Color Scheme

RTL Mode

Fluid Layout

Navigation Position

Vertical Navbar Style

Like What You See?