Tables

Use .table on the table element. It includes borders and rounded corners by default. Add .table-wrapper only when you need horizontal scroll.

Default table

Name	Email	Role	Status
Alice Johnson	[email protected]	Admin	Active
Bob Smith	[email protected]	Editor	Active
Carol Davis	[email protected]	Viewer	Inactive

<table class="table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Role</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Alice Johnson</th>
      <td>[email protected]</td>
      <td>Admin</td>
      <td>
        <span class="badge badge-success">
          <span class="badge-dot bg-green-500"></span>
          Active
        </span>
      </td>
    </tr>
    <tr>
      <th>Bob Smith</th>
      <td>[email protected]</td>
      <td>Editor</td>
      <td>
        <span class="badge badge-success">
          <span class="badge-dot bg-green-500"></span>
          Active
        </span>
      </td>
    </tr>
    <tr>
      <th>Carol Davis</th>
      <td>[email protected]</td>
      <td>Viewer</td>
      <td>
        <span class="badge badge-gray">
          <span class="badge-dot bg-gray-400"></span>
          Inactive
        </span>
      </td>
    </tr>
  </tbody>
</table>

Striped + Hoverable — add .table-striped and .table-hover to the table

Invoice	Date	Amount	Status
#1001	Jan 15, 2026	$1,200.00	Paid
#1002	Jan 22, 2026	$850.00	Pending
#1003	Feb 01, 2026	$2,340.00	Paid
#1004	Feb 03, 2026	$475.00	Overdue

<div class="table-wrapper">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th scope="col">Invoice</th>
        <th scope="col">Date</th>
        <th scope="col">Amount</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>#1001</th>
        <td>Jan 15, 2026</td>
        <td>$1,200.00</td>
        <td>
          <span class="badge badge-success badge-square">Paid</span>
        </td>
      </tr>
      <tr>
        <th>#1002</th>
        <td>Jan 22, 2026</td>
        <td>$850.00</td>
        <td>
          <span class="badge badge-warning badge-square">Pending</span>
        </td>
      </tr>
      <tr>
        <th>#1003</th>
        <td>Feb 01, 2026</td>
        <td>$2,340.00</td>
        <td>
          <span class="badge badge-success badge-square">Paid</span>
        </td>
      </tr>
      <tr>
        <th>#1004</th>
        <td>Feb 03, 2026</td>
        <td>$475.00</td>
        <td>
          <span class="badge badge-danger badge-square">Overdue</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>