<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.
Responsive Table That Also Scrolls If Necessary
Demonstrating another way to make a responsive table that is also keyboard accessible.
Bootstrap Table Search
Getting Responsive Tables to Behave
Getting responsive tables to behave using only CSS.
A CSS powered based responsive table by @PableraShow.
Responsive Flip Pricing Table
Responsive Flip Pricing Table to view month or year price.
Sortable Tabular Data
How to code a sortable table with jQuery.
Responsive Table with DataTables
Filtered and responsive table with DataTables.
Keyboard & mouse control on this heavy table !
Fixed Table Header
Fixed table header with simple jQuery code..
CSS Tricks method for responsive table
CSS Responsive Table Layout
Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Simple Pricing Table
Playing around with HTML tables and CSS.
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.
Adaptive Pricing Table
Awesome pricing table animations using only CSS.
CSS Price Table
Mobile friendly pricing table with additional user information for each plan.
Simple pricing tables. Playing around learning jQuery.
Responsive Table with RWD-Table-Patterns
An example of a responsive table based on RWD-Table-Patterns’ solution
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.
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.
CSS Responsive Table
Responsive table method using display:block and data attributes
Bootstrap Pricing Table
A simple Bootstrap pricing table plan with hovering elements.
Responsive Table & Detail View
A table example with detail view scenario using CSS and a some simple jQuery code.
Responsive comparison table, decrease/increase browser width to see it in action.
Material Design Pricing Tables
Google Material Design responsive pricing tables made with CSS.
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.
Nutrition Facts Table In HTML & CSS
Quick googling turned up some people who had the idea a while back.