Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

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.

License

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.

About

CSS take on responsive tables.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published