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

<table class="table table-striped table-hover">
  <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>
  </tbody>
</table>