HTML tables are a great thing to showcase data in a simple tabular form. Over the years with incorporation of divs and css, tables has become mostly obsolete in terms of designing websites. But it is still a very useful thing when you need to showcase a bunch of data in a easily understandable form. One of the major problem with HTML tables is that it is extremely hard to make them responsive. In fact that was the main reason the whole web development industry moved towards using divs rather than using tables. A few weeks back when I was working on developing a few features on my site, I was wondering if there is any easy way to make html tables responsive. But after searching on internet the most solutions I’ve found was either using some sort of jQuery or the end result is not looking so beautiful.

I’ve also tried a few WordPress plugins for this, but again they were injecting a few javascript files and the outcome wasn’t pleasant. At this point I started thinking why everybody is taking such hard steps to achieve something simple. So, I end up writing my own code, which I will share with you guys in this post, hoping that in future if someone else also stumbled upon the same problem, at least he can take an easy and effective approach rather than including a bunch of javascripts, either manually or via some WordPress plugins.

Why are you opposing the inclusion javascripts on websites?

As some of you guys know that I’m I’m very OCD in terms of optimizing websites so that they load at a blazing fast speed. Now one of the major culprit of slow website is javascript and jQuery. As most javascript or jQuery block the rendering of the website to work properly. In fact the jQuery library itself blocks a bit rendering.

But when we work with WordPress a ton of scripts gets automatically pushed by WordPress itself, then comes the scripts which are pushed by themes and plugins. Though there are smarter ways to write code so that the scripts gets pushed only when a certain feature is used which take advantage of that script, but it is extremely hard and time consuming to write code that way. That is why most theme and plugin developers just pushed them anyway, regardless of your use case.

Now this is a huge problem in terms of optimizing websites, especially with the multipurpose themes as they provide various flavour on a simple theme, but includes a ton of JS. So, if you also want your website to stay super fast, you should definitely think twice before including any javascript files inside your site, as they will harm your website rendering speed.

Some might argue, that what if we include the scripts at the end of our page or load them asynchronously? You see, the reason it s a good coding practise to load scripts at the bottom (before the </body> tag) or load them asynchronously, so that your textual contents can load at first before the js files and your users don’t have to see a blank white page for long time. But this doesn’t solve the actual rendering time issue. Even tough you add your scripts asynchronously at the bottom of the page, but still your site is going to keep loading until all js files are loaded and fired properly.

So, to keep my site super fast I always focus on how many javascripts I’m loading on each page and try my best to reduce that number. If you guys also like your site to be faster your should take it seriously also. Unfortunately, most free plugin developers don’t care about these things too seriously as they are earning nothing from those free plugins and it is nothing but a waste of time. After installing each plugin on your WordPress site, you should run a speedtest to check if that plugin is including any extra js files and if they are harming your website load time.

If you can, try to achieve your desired feature via CSS as much as possible and only take help of javascript if there is no other way.


So, as I’ve discussed why I take each javascript inclusion of my website so seriously let’s look at how can you make responsive tables without losing any design element whatsoever. If you don’t take website responsive seriously, you should start taking it seriously. As per researched done on 2015, more than 60% users now visit the web through mobile and mark my work, in very near future almost 80% to 90% people will interact with the web via a mobile device. So, as a webmaster make sure your website is ready for those visitors, or else they will leave your site and go to some other website. At this time, you can’t expect people to do pinch-zoom on your website to read your content.

Anyhow, enough talking, let’s begin with the code. Here in this article, first I will show you what code you need to make responsive table. Then I will show you how to add them in your site for both advanced and non-advanced WordPress users. So, let’s begin…

Let’s create a HTML table first

I’m pretty sure most of the people who are reading this article already know how to create a HTML table, but in case if there is someone who doesn’t have any HTML coding experience, here is how you create a table inside HTML. Now as WordPress generate contents dynamically via themes, most of the basic HTML parts you don’t need to add inside your page/posts as they will automatically be generated by your theme. So, just focus on the table code, which you need to add inside your text editor.

While adding the HTML for table inside your WordPress visual editor, make sure you use the “Text” editing mode, and not the “Visual” mode. Otherwise things will not work.

2016-08-12_23-26-54

Now if you are already familiar with HTML table codes, the only thing that you need to look in the above code is the class that I’ve assigned to the table block called responsive. make sure you add the responsive class to each of your table element to make it responsive.

Now it’s time for the Responsive Table CSS

Now this is where all the magic happens. This small piece of css (using css3) will make your tabes fully responsive for tablet and smartphone without any help of javascript. If you have a long table, visitors now can scroll left or right to see the entire table without breaking your website’s design. So, here is the css for making responsive tables:

For advanced WordPress user

If you are an advanced WordPress user, you might already be using a child theme. So, just head over to the style.css file of your child theme and add the above piece of css inside it. That’s it. You are all done. If you have some sort of WordPress caching plugin enabled, make sure you have cleared your cache so that the new code can reflect on your site.

For non-advanced WordPress user

If you are a non-advanced WordPress user, first go inside your theme settings (especially if you are using a paid theme) as most paid themes offer an option inside the theme settings to add custom css code. If your theme doesn’t provide a place to add your own custom css, check if you are using the Jetpack plugin by Automattic (the guys who have actually created WordPress). If you are using Jetpack, then hover on the Jetpack within your WordPress admin panel’s left vertical menu and click on Settings. Now enable the custom css module that comes with Jetpack. This will give you an option to add your own custom css inside your theme.

If you are not using the Jetpack plugin inside your WordPress site, there are plenty plugins like Simple Custom CSS, installing which will allow you to add your own custom css inside your website. So, after installing Simple Custom CSS, head over to Appearance  Custom CSS (inside your WordPress Admin panel) to add the above css I’ve mentioned.

For non-WordPress users

To use the responsive table feature, you not necessarily have to be a WordPress user. If you use some other CMS for your website or custom PHP or just simple HTML, you can still make your HTML tables responsive just by adding the above CSS inside your website and by making sure you always add the responsive class to your tables.

Working Example

After all this if you are looking for an example table where you are see how well the responsiveness works, try to load up this article on your smartphone or tablet and checkout the below example responsive table:

Student NamePhysics Marks (100)Chemistry Marks (100)Mathematics Marks (100)English Marks (100)Programming Marks (100)
Jhon8572957184
Jerry5662879859
Mark9657865969
Heather8767537880
Bonny4247525920
Sunny8659757683
Sam7696817198

If you are checking out this table over a portable device like smartphone or tablet, this is how it will look after becoming responsive. As you can see none of the design element of the table has been altered after being responsive and it doesn’t bring any strain over the website rendering time either. 🙂

Why not just use Bootstrap instead?

Yes, bootstrap is a great designing framework, but you have to understand that not all websites and WordPress themes uses bootstrap as a design foundation. The majority of sites (specially WordPress) don’t run it. So, for those sites you must need a way to achieve responsive tables. Now if you are running a site which is designed using bootstrap framework then you can easily create responsive tables by wrapping any .table in .table-responsive. But this article is for all those non bootstrap users who struggles with the responsiveness of their HTML table.

Feedback

So, let me know guys if this small piece of code helped you in anyway. I would love to hear your thoughts on this in the comment section below. Also if you want you can connect with me over twitter with my twitter handle @iSaumya. I’m looking forward to hear your thoughts on this and if this small piece of code helped you anyway. 🙂

Published by Saumya Majumder

Passionate, Hard Worker. Love to develop new things, Singing Songs, playing computer Action Games, tweaking with computer languages, Riding Bikes, Love long driving, love books, web & Photography. You can follow me on twitter @iSaumya
Shares
Subscribe To My Newsletter

Subscribe To My Newsletter

Join my mailing list to get meaningful content, useful information, how-tos, tricks, tips for webmaster, bloggers and entrepreneurs to rise and profit in your online business.

You are almost there! Just check your Inbox to confirm the Subscription & you are all set.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close