10 Best Responsive Table Plugins In JavaScript And CSS (2021 Update)

by jQueryScript,

A study shows that the number of smartphone users worldwide today surpasses three billion and is forecast to further grow by several hundred million in the next few years.

When it comes to United States, 63% of Google’s visits are via a mobile device (2019). This is why Google predominantly uses the mobile version of the content for indexing and ranking.

When you're building a website or webapp using a responsive design layout. You might find it difficult to deal with large (wider) HTML tables on small screen devices. This is because, by using the default table styles, a wide HTML table might break through the viewport and disrupt the overall layout of your page.

To address this, you might need a 3rd JavaScript solution or additional CSS styles to provide a better table view experience on mobile.

Here is a list of 10 best JavaScript and Pure CSS solutions to make your HTML table full responsive and better readability on mobile and tablet devices. Feel free to download and use them in your next modern web design to bring a better experience to existing HTML tables.

Originally Published July 09 2020, updated June 21 2021

Table of contents:

jQuery Responsive Table Plugins

Make HTML Table Responsive Across All Devices - jQuery table-shrinker

table-shrinker is a jQuery based responsive table solution which makes wide/large HTML tables fully responsive across all devices/platforms.

Make HTML Table Responsive Across All Devices - jQuery table-shrinker

[Demo] [Download]


FooTable - jQuery Responsive HTML Table Plugin

FooTable is a jQuery Plugin that makes HTML tables on smaller devices look awesome without breaking the functionality and design. This plugin hides certain columns of data at different resolutions and the Rows become expandable to show the d

FooTable - jQuery Responsive HTML Table Plugin

[Demo] [Download]


Basic Responsive Table Plugin For jQuery - Basic Table

Basic Table is an ultra-light jQuery plugin to create responsive, mobile-readable data tables using JS resize() method and CSS3 media queries.

Basic Responsive Table Plugin For jQuery - Basic Table

[Demo] [Download]


Mobile-friendly Responsive Bootstrap Table with jQuery

A simple jQuery responsive table solution that automatically converts a table into a Bootstrap based accordion interface when the maximum screen width is reached.

Mobile-friendly Responsive Bootstrap Table with jQuery

[Demo] [Download]


Dynamic Mobile-friendly Responsive Table Plugin - RWD Reflow Table

RWD Reflow Table is a dynamic, flexible, responsive table jQuery plugin designed for cross-platform tabular data presentation.

Dynamic Mobile-friendly Responsive Table Plugin - RWD Reflow Table

[Demo] [Download]


Vanilla JS Responsive Plugins

Pure JavaScript Responsive Table Solution – responsive-tables.js

responsive-tables.js is a pure JavaScript library for compressing your html table with multiple columns into a 2-column responsive table in small screens like mobile devices. Compatible with Bootstrap tables.

Pure JavaScript Responsive Table Solution – responsive-tables.js

[Demo] [Download]


Pure CSS Responsive Table Solutions

Pure CSS Mobile-friendly Responsive Table

Yet another pure CSS responsive table solution that transforms a normal html table into several separated tables in mobile view.

Pure CSS Mobile-friendly Responsive Table

[Demo] [Download]


Pure HTML5 / CSS3 Responsive Table Solution

A pure HTML5 / CSS3 solution to make your html table more readable on small screens, without any JavaScript.

Pure HTML5 / CSS3 Responsive Table Solution

[Demo] [Download]


Responsive Table with Pure CSS

A minimalist pure CSS solution to create a mobile-friendly responsive table that uses CSS media queries to make table cells full width on small devices.

Responsive Table with Pure CSS

[Demo] [Download]


Pure CSS Responsive HTML Table

Yet another CSS only responsive table solution to converts the normal wide HTML table into grouped blocks on mobile.

Pure CSS Responsive HTML Table

[Demo] [Download]


Conclusion:

Want more JavaScript and CSS solutions to create Responsive HTML tables on the web & mobile? Check out the jQuery Responsive Table and JavaScript Responsive Table sections.

See Also: