Easily make your tables responsive with JS/CSS

David Carr

HTML Tutorials Tools Development

I'm in the middle of building a responsive CRM when I realised it all works great except for the tables I needed to find a viable solution to this problem, after a little Googling I came across an excellent solution from the guys behind the Foundation front-end framework.

Their solution for Responsive Tables works like a charm instead of removing columns as the viewpoint gets smaller it puts the first column essential on top and the rest are positioned to the right allowing you to scroll vertically through the table even on very small screens check out their Demo to see it in action.

To implement their solution include their responsive CSS and JS file:

<link rel="stylesheet" href="css/responsive-tables.css" type="text/css">
<script type="text/javascript" src="js/responsive-tables.js"></script>

Then add a class of responsive to any table you want to make responsive:

<table class="responsive">

That's it its all ready to use!

I've only just started using it but so far it seems like a solid solution. If you know of others of have thoughts on this let me know in the comments.

Fathom Analytics $10 discount on your first invoice using this link

David Carr - Laravel Developer

Hi, I’m David Carr

A Senior Developer at Vivedia
I love to use the TALL stack (Tailwind CSS, Alpine.js, Laravel, and Laravel Livewire)

I enjoy writing tutorials and working on Open Source packages.

I also write books. I'm writing a new book Laravel Testing Cookbook, This book focuses on testing coving both PestPHP and PHPUnit.

Sponsor me on GitHub

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Laravel Testing Cookbook

Help support the blog so that I can continue creating new content!

Fathom Analytics $10 discount on your first invoice using this link

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2006 - 2023 DC Blog. All code MIT license. All rights reserved.