<Table> has always been a difficult HTML element to style across multiple browsers. But with CSS and JS you can easily achieve that and can create impressive table designs that fit your project.
Here’s a list of some of the best CSS and JS tables I found on CodePen.
Accordion CSS Table
Mobile friendly accordion table made with CSS and some simple JS.
See the Pen Accordion CSS Table by adahei (@adahei) on CodePen.
Responsive Table That Also Scrolls If Necessary
Demonstrating another way to make a responsive table that is also keyboard accessible.
See the Pen Responsive Table That Also Scrolls If Necessary by aardrian (@aardrian) on CodePen.
Bootstrap Table Search
Search input for Bootstrap grid with jQuery.
See the Pen Bootstrap Table Search by adobewordpress (@adobewordpress) on CodePen.
Getting Responsive Tables to Behave
Getting responsive tables to behave using only CSS.
See the Pen Getting Responsive Tables to Behave by joshnh (@joshnh) on CodePen.
<Table> Responsive
A CSS powered based responsive table by @PableraShow.
See the Pen <Table> Responsive by PableraShow (@PableraShow) on CodePen.
Responsive Flip Pricing Table
Responsive Flip Pricing Table to view month or year price.
See the Pen Responsive Flip Pricing Table by shaneheyns (@shaneheyns) on CodePen.
Sortable Tabular Data
How to code a sortable table with jQuery.
See the Pen Sortable Tabular Data by jakestuts (@jakestuts) on CodePen.
Responsive Table with DataTables
Filtered and responsive table with DataTables.
See the Pen Responsive Table with DataTables by SitePoint (@SitePoint) on CodePen.
HeavyTable
Keyboard & mouse control on this heavy table !
See the Pen HeavyTable by victordarras (@victordarras) on CodePen.
Fixed Table Header
Fixed table header with simple jQuery code..
See the Pen Fixed Table Header by nikhil8krishnan (@nikhil8krishnan) on CodePen.
Responsive Table
CSS Tricks method for responsive table
See the Pen Responsive Table by alico (@alico) on CodePen.
CSS Responsive Table Layout
Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
See the Pen CSS Responsive Table Layout by lukepeters (@lukepeters) on CodePen.
Simple Pricing Table
Playing around with HTML tables and CSS.
See the Pen Simple Pricing Table by zitrusfrisch (@zitrusfrisch) on CodePen.
CSS Pricing Table
All design credit to Focus Lab, LLC. They shared a shot on Dribbble with something similar to this and I just wanted to create it for practice.
See the Pen CSS Pricing Table by mtorosian (@mtorosian) on CodePen.
Adaptive Pricing Table
Awesome pricing table animations using only CSS.
See the Pen Adaptive Pricing Table by VoloshchenkoAl (@VoloshchenkoAl) on CodePen.
CSS Price Table
Mobile friendly pricing table with additional user information for each plan.
See the Pen CSS Price Table by roydigerhund (@roydigerhund) on CodePen.
Pricing Tables
Simple pricing tables. Playing around learning jQuery.
See the Pen Pricing Tables by j-w-v (@j-w-v) on CodePen.
Responsive Table with RWD-Table-Patterns
An example of a responsive table based on RWD-Table-Patterns’ solution
See the Pen Responsive Table with RWD-Table-Patterns by SitePoint (@SitePoint) on CodePen.
Pure CSS Table Highlight (Vertical & Horizontal)
A simple (and nasty) trick to have vertical and horizontal highlight on hover on tables made with pure CSS.
See the Pen Pure CSS Table Highlight (Vertical & Horizontal) by alexerlandsson (@alexerlandsson) on CodePen.
CSS Table
Using CSS to fade-in a row, fade-out a row and show data in the table updating on a live basis. Also hovering over a row expands to show more information.
See the Pen CSS Table by cssparadise (@cssparadise) on CodePen.
CSS Responsive Table
Responsive table method using display:block and data attributes
See the Pen CSS Responsive Table by geoffyuen (@geoffyuen) on CodePen.
Bootstrap Pricing Table
A simple Bootstrap pricing table plan with hovering elements.
See the Pen Bootstrap Pricing Table by mrsahar (@mrsahar) on CodePen.
Responsive Table & Detail View
A table example with detail view scenario using CSS and a some simple jQuery code.
See the Pen Responsive Table & Detail View by hbuchel (@hbuchel) on CodePen.
Responsive Table
Responsive comparison table, decrease/increase browser width to see it in action.
See the Pen Responsive Table by andyunleash (@andyunleash) on CodePen.
Material Design Pricing Tables
Google Material Design responsive pricing tables made with CSS.
See the Pen Material Design Pricing Tables by kresogalic (@kresogalic) on CodePen.
Responsive Table With Flexbox
The idea was to create a nice working table which is working on smaller screens also. I think this is a nice solution. Works even with a width of 405px.
See the Pen Responsive Table With Flexbox by mathiesjanssen (@mathiesjanssen) on CodePen.
Nutrition Facts Table In HTML & CSS
Quick googling turned up some people who had the idea a while back.
See the Pen Nutrition Facts Table In HTML & CSS by chriscoyier (@chriscoyier) on CodePen.
