Tables

2.0.2

Clean, responsive table styles with support for striped rows, hover states, and small variations.

Installation

Full Bundle (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/axis-twelve.min.css">

Module Only (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/modules/axis-tables.min.css">

Class Reference

.ax-tableBase

Base table styling.

.ax-table--stripedModifier

Adds alternating background color to rows.

.ax-table--hoverModifier

Highlights rows on mouse hover.

.ax-table--responsiveModifier

Enables mobile-friendly stacking behavior.

.ax-table-wrapperLayout

Container for horizontal scroll.

Live Examples

Data Dashboard Table

A styled table featuring striped rows, hover effects, and responsive behavior.

Preview: Data Dashboard Table

User	Status	Last Active	Actions
Alice Johnson	Active	2 mins ago
Bob Smith	Offline	5 hours ago

Source Code

html

<div class="ax-table-wrapper">
  <table class="ax-table ax-table--striped ax-table--hover ax-table--responsive">
    <thead>
      <tr>
        <th>User</th>
        <th>Status</th>
        <th>Last Active</th>
        <th class="ax-text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="User">Alice Johnson</td>
        <td data-label="Status"><span class="ax-bg-green-100 ax-text-green-700 ax-px-2 ax-py-0.5 ax-rounded-full ax-text-xs">Active</span></td>
        <td data-label="Last Active">2 mins ago</td>
        <td data-label="Actions" class="ax-text-right"><button class="ax-btn ax-btn--sm">Edit</button></td>
      </tr>
      <tr>
        <td data-label="User">Bob Smith</td>
        <td data-label="Status"><span class="ax-bg-gray-100 ax-text-gray-700 ax-px-2 ax-py-0.5 ax-rounded-full ax-text-xs">Offline</span></td>
        <td data-label="Last Active">5 hours ago</td>
        <td data-label="Actions" class="ax-text-right"><button class="ax-btn ax-btn--sm">Edit</button></td>
      </tr>
    </tbody>
  </table>
</div>

Module Evolution

Version	Type	Description
v2.0.1	Internal	Refactored text-align to use logical start/end values.

← Previous

Cards

Modals