Skip to content
CSS take on responsive tables.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

CSS.Responsive Tables

Quick bit of CSS & HTML to get you going with a responsive table layout. The two main goals were to avoid using client-side scripting and to streamline.

How it works

Makes use of a CSS media query up to a width you desire. Scale your browser window down to the appropriate size for activation.

In my personal projects I seem to be able to get away with a standard table view somewhere around 500 to 549px/34.3125em. The media query has the added benefit of weeding out early versions of IE.

Browser compatibility

Works in Firefox, Chrome, Opera, and Safari. IE-9 is fine as well. Technically IE-8 can handle the responsive format, but due to media queries and the lack of a shim 8 gets lumped into IE-7 territory. And IE-7-, well, those users receive the original table.


Ignoring a license on this project since I'm unsure where the pattern originated (feel free to help me update any kudos). But to give credit to my resource... a friend of mine, jpstreich, introduced me to this concept and the original code around late 2011 to early 2012, on a collaborative research project.

I did include Normalize.css and the box model tweak from Paul Irish for general formatting purposes.

You can’t perform that action at this time.