Table collapses into a "list" on small screens. Headers are pulled from data attributes.
Material Design by Google (http://www.google.com/design/)
Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7
Data table example
This is a data table for a jQuery plugin I am working on. I wanted to share the hover effect I am using. If you hover of a table row, the sibling rows will blur and fade out.
Fixed table header with simple jQuery code..
Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs.
Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :after to create a alternate column header when in mobile view. Because it is designed mobile first you will need the respond.js (https://github.com/scottjehl/Respond) to make it work with IE8 (and below).
Dribbble rebound of Vlade Dimovski's pricing table.
My go at a simple, clean table for WebDesignTuts Community Project - see more about it here: http://webdesign.tutsplus.com/articles/workshops/community-project-style-a-simple-data-table/
Need to know how to enable it? Go here.