Display responsive HTML tables on small screens without JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
index.html
readme.md

readme.md

Responsive 'Rainbow' Tables

This tidy bit of CSS will adapt a standard table to a usable, scrollable format at whichever content width you set in the media query.

Demo

Usage

Paste the CSS from the <style> tag of index.html

Tweak the media query and colors to suit your application.

Goals

This solution is 100% CSS and does not hide any information. It can be dropped into your stylesheet and will work with only minor tweaks (if you have customized how tables appear on your site, you may have to override them). It aims to be usable by clearly delineating table cells with color and rows with color and spacing. The colors should be accessible for people with color deficiencies by alternating foreground/background contrast.

Contribute

Issues and Pull requests welcome!