table-saw

A small structural-only zero-dependency Web Component for responsive

elements. Heavily inspired by Filament Group’s Tablesaw Stack jQuery plugin.

Demo

Examples

``html







`

* Use breakpoint attribute to set the breakpoint (default:(max-width: 39.9375em)).
* Use type="container" attribute to use container queries instead of viewport-based media queries (default: type="media").
* Use ratio attribute to override the small viewport column ratio (default: 1/2).
* Use zero-padding attribute to remove small viewport padding on table cells.
* Use text-align attribute to force column text alignment at small viewport.

Installation

You have a few options (choose one of these):

1. Install via npm: npm install @zachleat/table-saw
1. Download the source manually from GitHub into your project.
1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

$3

Make sure you include the
`

`html


`

`html


`

Features

* Supports one or many

child elements.
* Works with viewport media queries or container queries.
* Uses CSS grid for small viewport alignment.
* Falls back to regular table before or without JavaScript.
* Cuts the mustard on CSSStyleSheet.prototype.replaceSync`