CSS & JS Table Examples From CodePen

<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.