Table

<div class="table-wrapper">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>Editor</td>
      </tr>
      <tr>
        <td>Bob Wilson</td>
        <td>bob@example.com</td>
        <td>Viewer</td>
      </tr>
    </tbody>
  </table>
</div>

Requires: ux.min.css

<div class="rounded-xl overflow-hidden border border-base-300">
  <table class="w-full text-sm">
    <thead>
      <tr>
        <th class="px-4 py-2.5 text-left font-semibold bg-base-200">Name</th>
        <th class="px-4 py-2.5 text-left font-semibold bg-base-200">Email</th>
        <th class="px-4 py-2.5 text-left font-semibold bg-base-200">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-4 py-2.5 border-b border-base-300">John Doe</td>
        <td class="px-4 py-2.5 border-b border-base-300">john@example.com</td>
        <td class="px-4 py-2.5 border-b border-base-300">Admin</td>
      </tr>
      <tr>
        <td class="px-4 py-2.5 border-b border-base-300">Jane Smith</td>
        <td class="px-4 py-2.5 border-b border-base-300">jane@example.com</td>
        <td class="px-4 py-2.5 border-b border-base-300">Editor</td>
      </tr>
      <tr>
        <td class="px-4 py-2.5">Bob Wilson</td>
        <td class="px-4 py-2.5">bob@example.com</td>
        <td class="px-4 py-2.5">Viewer</td>
      </tr>
    </tbody>
  </table>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS styling

<div class="table-wrapper">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Widget A</td><td>$9.99</td><td>142</td></tr>
      <tr><td>Widget B</td><td>$14.99</td><td>85</td></tr>
      <tr><td>Widget C</td><td>$24.99</td><td>203</td></tr>
      <tr><td>Widget D</td><td>$4.99</td><td>67</td></tr>
    </tbody>
  </table>
</div>

Requires: ux.min.css

<div class="rounded-xl overflow-hidden border border-base-300">
  <table class="w-full text-sm">
    <thead>
      <tr>
        <th class="px-4 py-2.5 text-left font-semibold bg-base-200">Product</th>
        <th class="px-4 py-2.5 text-left font-semibold bg-base-200">Price</th>
        <th class="px-4 py-2.5 text-left font-semibold bg-base-200">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr class="transition-colors duration-150 hover:bg-primary/5">
        <td class="px-4 py-2.5 border-b border-base-300">Widget A</td>
        <td class="px-4 py-2.5 border-b border-base-300">$9.99</td>
        <td class="px-4 py-2.5 border-b border-base-300">142</td>
      </tr>
      <tr class="bg-base-200 transition-colors duration-150 hover:bg-primary/5">
        <td class="px-4 py-2.5 border-b border-base-300">Widget B</td>
        <td class="px-4 py-2.5 border-b border-base-300">$14.99</td>
        <td class="px-4 py-2.5 border-b border-base-300">85</td>
      </tr>
      <tr class="transition-colors duration-150 hover:bg-primary/5">
        <td class="px-4 py-2.5 border-b border-base-300">Widget C</td>
        <td class="px-4 py-2.5 border-b border-base-300">$24.99</td>
        <td class="px-4 py-2.5 border-b border-base-300">203</td>
      </tr>
      <tr class="bg-base-200 transition-colors duration-150 hover:bg-primary/5">
        <td class="px-4 py-2.5">Widget D</td>
        <td class="px-4 py-2.5">$4.99</td>
        <td class="px-4 py-2.5">67</td>
      </tr>
    </tbody>
  </table>
</div>

Requires: tw.min.css

// No JavaScript required

<div class="table-wrapper">
  <table class="table table-compact table-bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>Status</th>
        <th>Date</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>#001</td><td>Paid</td><td>2024-01-15</td><td>$120.00</td></tr>
      <tr><td>#002</td><td>Pending</td><td>2024-01-16</td><td>$85.50</td></tr>
      <tr><td>#003</td><td>Paid</td><td>2024-01-17</td><td>$200.00</td></tr>
    </tbody>
  </table>
</div>

Requires: ux.min.css

<div class="rounded-xl overflow-hidden border border-base-300">
  <table class="w-full text-xs">
    <thead>
      <tr>
        <th class="px-3 py-1.5 text-left font-semibold bg-base-200 border border-base-300">ID</th>
        <th class="px-3 py-1.5 text-left font-semibold bg-base-200 border border-base-300">Status</th>
        <th class="px-3 py-1.5 text-left font-semibold bg-base-200 border border-base-300">Date</th>
        <th class="px-3 py-1.5 text-left font-semibold bg-base-200 border border-base-300">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-3 py-1.5 border border-base-300">#001</td>
        <td class="px-3 py-1.5 border border-base-300">Paid</td>
        <td class="px-3 py-1.5 border border-base-300">2024-01-15</td>
        <td class="px-3 py-1.5 border border-base-300">$120.00</td>
      </tr>
      <tr>
        <td class="px-3 py-1.5 border border-base-300">#002</td>
        <td class="px-3 py-1.5 border border-base-300">Pending</td>
        <td class="px-3 py-1.5 border border-base-300">2024-01-16</td>
        <td class="px-3 py-1.5 border border-base-300">$85.50</td>
      </tr>
      <tr>
        <td class="px-3 py-1.5 border border-base-300">#003</td>
        <td class="px-3 py-1.5 border border-base-300">Paid</td>
        <td class="px-3 py-1.5 border border-base-300">2024-01-17</td>
        <td class="px-3 py-1.5 border border-base-300">$200.00</td>
      </tr>
    </tbody>
  </table>
</div>

Requires: tw.min.css

// No JavaScript required