10 Best Responsive Table Plugins In JavaScript And CSS (2024 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.

In 2020, the number of unique mobile internet users stood at 4.28 billion, indicating that over 90 percent of the global internet population use a mobile device to go online. 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 Feb 29 2024

Table of contents:

jQuery Responsive Table Plugins

Mobile-first Responsive Table Solution For Bootstrap 5

A lightweight, easy-to-use, mobile-first, progressive enhanced jQuery responsive table plugin for the latest Bootstrap 5 framework.

Mobile-first Responsive Table Solution For Bootstrap 5

[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]


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.

FooTable - jQuery Responsive HTML Table Plugin

[Demo] [Download]


jQuery Plugin for Mobile-Friendly HTML Tables - makeTableResponsive.js

Just another jQuery plugin designed to create fully responsive HTML tables that adapt gracefully to mobile devices.

jQuery Plugin for Mobile-Friendly HTML Tables - makeTableResponsive.js

[Demo] [Download]


Minimal Accessible Responsive Table Plugin - jQuery Easy Table A11Y

A minimal(~1kb minified), accessible, responsive table jQuery plugin designed to elevate the table-viewing experience on smaller screens like mobile and tablet devices.

Minimal Accessible Responsive Table Plugin - jQuery Easy Table A11Y

[Demo] [Download]


Vanilla JS Responsive Table Plugins

Tiny Responsive Table Web Component – table-saw

A lightweight responsive table Web Component that smoothly transitions table rows and columns into a more readable stacked two-column layout on smaller viewports.

Tiny Responsive Table Web Component – table-saw

[Demo] [Download]


Responsive Table With JavaScript And CSS Media Queries – Table-Fluid

A super tiny (less than 1kb) JavaScript-powered responsive table solution that can make your HTML more readable in mobile view.

Responsive Table With JavaScript And CSS Media Queries – Table-Fluid

[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]


Responsive Table For Bootstrap 5 Framework

a lightweight and simple CSS extension that converts wide Bootstrap tables into one or two-column tables on smaller screen sizes. It supports a number of devices and platforms, including desktops, laptops, smartphones, and tablets. So you can be sure that your tables will be displayed on all platforms.

Responsive Table For Bootstrap 5 Framework

[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]


Conclusion:

Seeking more JavaScript and CSS solutions to create Responsive HTML tables on the web & mobile? See jQuery Responsive Table and JavaScript Responsive Table sections for more details.

See Also: