Logo
hummingbird

Table

Tables organize and display structured data in rows and columns.

Class Name Type Description
table Component Basic table
table-primary Color Primary color
table-secondary Color Secondary color
table-success Color Success color
table-danger Color Danger color
table-warning Color Warning color
table-info Color Info color
table-neutral Color Neutral color
table-sm Size Small table
table-highlight Modifier Highlighted table
table-striped Modifier Striped table
table-striped-columns Modifier Striped columns
table-hover Modifier Hoverable table
table-active Modifier Active row or cell
table-sticky-header Modifier Sticky table header
table-bordered Modifier Bordered table
table-borderless Modifier Borderless table
Basic Table

A basic table consists of a header, body, and optional footer. Use the .table to get the basic styling.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Highlight Table

Highlight table-head and table-footer with .table-highlight class.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

Total count: 5

HTML

<div class="overflow-x-auto rounded-2xl">
  <table class="table table-highlight">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row"></th>
        <td></td>
        <td>
          <p class="font-semibold mb-0">Total count: 5</p>
        </td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>
Variants

You can easily create different table variants by applying contextual classes to the table, rows, or cells.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended
006 Fiona Green fiona.green@example.com Active
007 George Hill george.hill@example.com Inactive 
<!-- On tables -->

<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-neutral">...</table>

<!-- On rows -->

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-neutral">...</tr>

<!-- On cells (td or th) -->

<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-neutral">...</td>
</tr>
Small Table

Small tables can be created using the .table-sm class.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table table-sm">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Accented tables
Striped Table

Striped tables use the .table-striped class to add zebra-striping to the table rows.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Striped columns

Striped columns use the .table-striped-columns class to add zebra-striping to the table columns.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table table-striped-columns">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Hoverable Table

Enable row highlighting on hover with the .table-hover class.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto rounded-t-2xl">
  <table class="table table-highlight table-hover">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Active Table

Use the .table-active class to highlight the active row or cell.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr class="table-active">
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td class="table-active"><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Table sticky header

Here the example of table with sticky header. Add .table-sticky-header class to the table element and set a height to the parent container with overflow-auto class.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended
006 Fiona Green fiona.green@example.com Active
007 George Hill george.hill@example.com Inactive
008 Hannah Moore hannah.moore@example.com Active
009 Ian Thompson ian.thompson@example.com Pending
010 Julia White julia.white@example.com Active

HTML

<div class="overflow-auto rounded-t-2xl h-[19rem]">
  <table class="table table-highlight table-sticky-header">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
      <tr>
        <th scope="row">006</th>
        <td>Fiona Green</td>
        <td><a href="#" class="link link-hover link-primary">fiona.green@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">007</th>
        <td>George Hill</td>
        <td><a href="#" class="link link-hover link-primary">george.hill@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">008</th>
        <td>Hannah Moore</td>
        <td><a href="#" class="link link-hover link-primary">hannah.moore@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">009</th>
        <td>Ian Thompson</td>
        <td><a href="#" class="link link-hover link-primary">ian.thompson@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">010</th>
        <td>Julia White</td>
        <td><a href="#" class="link link-hover link-primary">julia.white@example.com</a></td>
        <td>Active</td>
      </tr>
    </tbody>
  </table>
</div>
Spanning table

A simple example with spanning rows & columns.

Details Price
Desc Qty. Unit Sum
Notebooks (Pack) 50 2.50 125.00
Pens (Dozen) 5 12.99 64.95
Desk Organizer 3 22.49 67.47
Subtotal 257.42
Tax 6.5% 16.73
Total 274.15

HTML

<div class="overflow-x-auto">
  <table class="table">
    <thead>
      <tr>
        <th scope="col" colspan="3" class="text-center">Details</th>
        <th scope="col">Price</th>
      </tr>
      <tr>
        <th scope="col">Desc</th>
        <th scope="col">Qty.</th>
        <th scope="col">Unit</th>
        <th scope="col">Sum</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Notebooks (Pack)</th>
        <td>50</td>
        <td>2.50</td>
        <td>125.00</td>
      </tr>
      <tr>
        <th scope="row">Pens (Dozen)</th>
        <td>5</td>
        <td>12.99</td>
        <td>64.95</td>
      </tr>
      <tr>
        <th scope="row">Desk Organizer</th>
        <td>3</td>
        <td>22.49</td>
        <td>67.47</td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <th scope="row" colspan="2">Subtotal</th>
        <td>257.42</td>
      </tr>
      <tr>
        <th scope="row">Tax</th>
        <td>6.5%</td>
        <td>16.73</td>
      </tr>
      <tr>
        <th scope="row" colspan="2">Total</th>
        <td>274.15</td>
      </tr>
    </tbody>
  </table>
</div>
Caption

A table caption provides a title or summary for the table’s content. Use the <caption> element to add a caption to your table.

A basic table example with a caption
ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table">
    <caption>A basic table example with a caption</caption>
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Table borders
Bordered Table

Add the .table-bordered class to the table element to create borders around all table cells.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
Tables without borders

Add the .table-borderless class to the table element to remove borders from all table cells.

ID Name Email Status
001 Alice Johnson alice.johnson@example.com Active
002 Bob Smith bob.smith@example.com Inactive
003 Charlie Davis charlie.davis@example.com Pending
004 Diana Lee diana.lee@example.com Active
005 Ethan Brown ethan.brown@example.com Suspended

HTML

<div class="overflow-x-auto">
  <table class="table table-borderless">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">001</th>
        <td>Alice Johnson</td>
        <td><a href="#" class="link link-hover link-primary">alice.johnson@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">002</th>
        <td>Bob Smith</td>
        <td><a href="#" class="link link-hover link-primary">bob.smith@example.com</a></td>
        <td>Inactive</td>
      </tr>
      <tr>
        <th scope="row">003</th>
        <td>Charlie Davis</td>
        <td><a href="#" class="link link-hover link-primary">charlie.davis@example.com</a></td>
        <td>Pending</td>
      </tr>
      <tr>
        <th scope="row">004</th>
        <td>Diana Lee</td>
        <td><a href="#" class="link link-hover link-primary">diana.lee@example.com</a></td>
        <td>Active</td>
      </tr>
      <tr>
        <th scope="row">005</th>
        <td>Ethan Brown</td>
        <td><a href="#" class="link link-hover link-primary">ethan.brown@example.com</a></td>
        <td>Suspended</td>
      </tr>
    </tbody>
  </table>
</div>
CSS variables

The table component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.table {
  --table-bg: initial;
  --table-color: var(--text-color-highlight);
  --table-cell-padding-x: --spacing(4);
  --table-cell-padding-y: --spacing(4);
  --table-border-color: var(--border-color-light);
  --table-font-size: var(--text-sm);
  --table-head-bg: var(--background-color-subtle);
  --table-head-color: var(--text-color-default);
  --table-striped-bg: var(--background-color-muted);
  --table-striped-color: var(--text-color-highlight);
  --table-active-bg: var(--background-color-highlight);
  --table-active-color: var(--text-color-default);
  --table-hover-bg: var(--background-color-highlight);
  --table-hover-color: var(--text-color-highlight);
}