#responsive table

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

Demo

Download

AvalynxTable is a tiny JavaScript library that makes Bootstrap 5 HTML tables look good and function well on mobile devices. You know how tables can get all squished and hard to read on smaller screens?  This Bootstrap 5 extension fixes that by automatically stacking rows and columns when the table reaches a certain breakpoint. This makes it much easier to view and interact with table data on…

table-saw is a lightweight responsive table Web Component that smoothly transitions table rows and columns into a more readable stacked two-column layout on smaller viewports. How to use it: 1. Download and import the table-saw as a web component. <script type="module" src="table-saw.js"></script> 2. Wrap your table element into the table-saw component and specify the breakpoint (default:…

Responsive Table For Bootstrap 5 Framework

Bootstrap 5 is an immensely popular web framework for designing responsive, mobile-friendly applications and websites. But writing for multiple devices comes with challenges. Although Bootstrap includes some CSS components with table-related features, an extension can be useful to save time when you need to create responsive tables, especially those with mixed data types or tabular elements…

Add Scroll Shadows To Wide HTML Tables – TableScrollShadow

A tiny JavaScript responsive table library that adds a scrollbar under the table when the content overflows its container and applies inset shadows to both sides that tell the visitor there are more table columns to scroll. How to use it: 1. Load the stylesheet table-scroll-shadow.min.css and JavaScript table-scroll-shadow.min.js in the document. <link rel="stylesheet"…

Collapse Overflowing Table Columns Into A Dropdown – Podtablejs

Podtablejs is a brand new responsive table solution that automatically collapses overflowing table columns into a dropdown when there is no enough space. How to use it: 1. Install and import the Podtablejs as an ES module. # NPM $ npm i podtable --save import { Podtable } from ‘podtable’; 2. Or download the package and include the podtable.js on the page. <script…

Convert HTML Table To Card View On Mobile Using JavaScript

A plain JavaScript responsive table solution that transforms HTML tables into user-friendly card view on mobile (screen size is less than 426px). Compatible with the latest Bootstrap framework. How to use it: 1. Insert the JavaScript konvert-table-to-card.min.js into the document. <script src="konvert-table-to-card.min.js"></script> 2. Initialize the plugin on the HTML table and done. <table…