Tables

The tables addon provides styled table classes with variants for striped rows, hover highlights, bordered cells, compact spacing, fixed layout, responsive horizontal scrolling, and cell-level alignment utilities.

Installation

npm install @thenewcss/tables

Basic Table

Apply .table for full-width styling with consistent padding and bottom borders.

Name	Role	Status	Date
Alice Martin	Designer	Active	Jan 15, 2025
Bob Chen	Developer	Active	Feb 02, 2025
Carol Davis	Manager	On Leave	Mar 10, 2025
Dan Wilson	QA Engineer	Active	Apr 22, 2025

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Martin</td>
      <td>Designer</td>
      <td>Active</td>
      <td>Jan 15, 2025</td>
    </tr>
    <tr>
      <td>Bob Chen</td>
      <td>Developer</td>
      <td>Active</td>
      <td>Feb 02, 2025</td>
    </tr>
  </tbody>
</table>

Striped Table

Add .table-striped for alternating row backgrounds on even rows.

Name	Role	Status	Date
Alice Martin	Designer	Active	Jan 15, 2025
Bob Chen	Developer	Active	Feb 02, 2025
Carol Davis	Manager	On Leave	Mar 10, 2025
Dan Wilson	QA Engineer	Active	Apr 22, 2025

<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Alice Martin</td><td>Designer</td><td>Active</td><td>Jan 15, 2025</td></tr>
    <tr><td>Bob Chen</td><td>Developer</td><td>Active</td><td>Feb 02, 2025</td></tr>
    <tr><td>Carol Davis</td><td>Manager</td><td>On Leave</td><td>Mar 10, 2025</td></tr>
  </tbody>
</table>

Hover Table

Add .table-hover to highlight rows on hover.

Name	Role	Status	Date
Alice Martin	Designer	Active	Jan 15, 2025
Bob Chen	Developer	Active	Feb 02, 2025
Carol Davis	Manager	On Leave	Mar 10, 2025
Dan Wilson	QA Engineer	Active	Apr 22, 2025

<table class="table table-hover">
  ...
</table>

Bordered Table

Add .table-bordered for borders on the table and all cells.

Name	Role	Status	Date
Alice Martin	Designer	Active	Jan 15, 2025
Bob Chen	Developer	Active	Feb 02, 2025
Carol Davis	Manager	On Leave	Mar 10, 2025
Dan Wilson	QA Engineer	Active	Apr 22, 2025

<table class="table table-bordered">
  ...
</table>

Compact Table

Add .table-compact to reduce cell padding for denser data display.

Name	Role	Status	Date
Alice Martin	Designer	Active	Jan 15, 2025
Bob Chen	Developer	Active	Feb 02, 2025
Carol Davis	Manager	On Leave	Mar 10, 2025
Dan Wilson	QA Engineer	Active	Apr 22, 2025

<table class="table table-compact">
  ...
</table>

Combined: Striped + Hover

Variants compose naturally. Combine .table-striped and .table-hover for striped rows with hover highlights.

Name	Role	Status	Date
Alice Martin	Designer	Active	Jan 15, 2025
Bob Chen	Developer	Active	Feb 02, 2025
Carol Davis	Manager	On Leave	Mar 10, 2025
Dan Wilson	QA Engineer	Active	Apr 22, 2025

<table class="table table-striped table-hover">
  ...
</table>

Responsive Table

Wrap a table in a .table-responsive container for horizontal scrolling on narrow viewports.

ID	Name	Email	Role	Department	Location	Status	Start Date
001	Alice Martin	[email protected]	Designer	Product	New York	Active	Jan 15, 2025
002	Bob Chen	[email protected]	Developer	Engineering	San Francisco	Active	Feb 02, 2025
003	Carol Davis	[email protected]	Manager	Operations	Chicago	On Leave	Mar 10, 2025

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Department</th>
        <th>Location</th>
        <th>Status</th>
        <th>Start Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td class="cell-nowrap">Alice Martin</td>
        <td class="cell-nowrap">[email protected]</td>
        <td>Designer</td>
        <td>Product</td>
        <td>New York</td>
        <td>Active</td>
        <td class="cell-nowrap">Jan 15, 2025</td>
      </tr>
    </tbody>
  </table>
</div>

Cell Utilities

Apply cell utility classes directly to th or td elements for alignment, wrapping, and truncation control.

Product	Quantity	Price	Ship Date
Premium Wireless Bluetooth Headphones with Noise Cancellation	42	$129.99	Jan 15, 2025
Ergonomic Mechanical Keyboard with Cherry MX Blue Switches	18	$89.50	Feb 02, 2025
Ultra-Slim USB-C Docking Station with Dual Monitor Support	7	$249.00	Mar 10, 2025

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Product</th>
      <th class="cell-center">Quantity</th>
      <th class="cell-right">Price</th>
      <th class="cell-nowrap">Ship Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell-truncate" style="max-width: 150px">
        Premium Wireless Bluetooth Headphones...
      </td>
      <td class="cell-center cell-middle">42</td>
      <td class="cell-right">$129.99</td>
      <td class="cell-nowrap">Jan 15, 2025</td>
    </tr>
  </tbody>
</table>

Class Reference

Base

Class	Description
`.table`	Width 100%, border-collapse, font-size 0.875rem, text-align start. `th` gets font-weight 600, padding 0.75rem/1rem, border-bottom 2px gray-200. `td` gets padding 0.75rem/1rem, border-bottom 1px gray-200.

Variants

Class	Description
`.table-striped`	Even rows get a gray-50 background
`.table-hover`	Rows get a gray-100 background on hover
`.table-bordered`	1px gray-200 border on the table and all cells
`.table-compact`	Reduced cell padding (0.5rem/0.75rem)
`.table-fixed`	Sets table-layout to fixed for equal-width columns

Responsive

Class	Description
`.table-responsive`	Overflow-x auto wrapper for horizontal scrolling on narrow viewports

Cell Utilities

Class	Description
`.cell-nowrap`	Prevents text wrapping inside the cell
`.cell-truncate`	Truncates overflowing text with an ellipsis (max-width 0, overflow hidden)
`.cell-center`	Centers text horizontally (text-align center)
`.cell-right`	Right-aligns text (text-align end)
`.cell-middle`	Vertically centers cell content (vertical-align middle)