Tables

Basic Table

Wrap your table in .quanta-table-responsive, and apply .quanta-table to a standard HTML table.

<div class="quanta-table-responsive">
  <table class="quanta-table">
    <thead>
      <tr><th>Name</th><th>Age</th><th>City</th></tr>
    </thead>
    <tbody>
      <tr><td>Alice</td><td>28</td><td>NYC</td></tr>
      <tr><td>Bob</td><td>34</td><td>LA</td></tr>
    </tbody>
  </table>
</div>

Size Variants

Control padding and font-size with .quanta-table-sm or .quanta-table-lg.

<table class="quanta-table quanta-table-sm">…</table>
<table class="quanta-table quanta-table-lg">…</table>

Hover Rows

Highlight rows on hover with .quanta-table-hover.

<table class="quanta-table quanta-table-hover">…</table>

Zebra Stripes

Alternate row backgrounds with .quanta-table-zebra.

<table class="quanta-table quanta-table-zebra">…</table>

Borders

Show all cell borders with .quanta-table-bordered.

<table class="quanta-table quanta-table-bordered">…</table>

Rounded Corners

Give the table rounded corners with .quanta-table-rounded.

<table class="quanta-table quanta-table-rounded">…</table>

Shadowed

Add a drop shadow with .quanta-table-shadowed.

<table class="quanta-table quanta-table-shadowed">…</table>

Glass (Backdrop Blur)

Frosted glass effect with .quanta-table-glass (use in supported browsers).

<table class="quanta-table quanta-table-glass">…</table>

Sortable Headers

Mark headers as sortable with .sortable, and toggle .sorted-asc / .sorted-desc in your JS.

<th class="sortable sorted-asc">Name</th>

Responsive Scrolling

The .quanta-table-responsive wrapper ensures horizontal scrolling on narrow viewports.