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

8 Comments

  1. Great article 🙂 Thanks for saving my day.. Was looking for it from very long time..

    Reply
  2. Thanks for working that out, Saumya, it is indeed an easy way to display tables better without much impact on your website.

    I have oriented on the subject before and found all kind of css solutions that I found to be too complex to implement. And I really don’t want the table just to shrink to unreadable small column sizes, trying and your solution lets the table keep wide while shrinking the part you see at any time of it.

    The most elegant solution I found in which tables can be maintained easily without struggling with html and that will collapse tables when displayed on small devices consisted off two WordPress plugins:
    1. TablePress
    2. FooTable

    TablePress resolves the need for coding tables using HTML, by giving a more visual edit-screen (like a spreadsheet). FooTables adds functionality to auto collapse a table showing only one or two columns on small screens with a toggle + to expand the row (showing each cel with heading as label followed by the cell-value).

    Of course it is not lean at all compared to your solution, but I like having a visual editor and a table repository, and the resulting table gives a very neat user-experience.

    I hear what you’re saying about staying lean in js-scripts, but when one uses WordPress including a store and eLearning plugins and many others performing many functions (like seo and persenting media) there are al ready many scripts loaded.

    So perhaps it is also right to just make sure the page is available for users as fast as possible, by loading asynchrone and putting scripts at the bottom of the screen, while accepting the fact that in modern websites JavaScript is a fact of live.

    I don’t want to worry you on the facts of loading scripts, but I’ve even read some presentations that state the future of dynamic websites is that the server (and CMS) will be more and more reduced to a data server, while the user experience (themes) will be mostly written in JavaScript. The advantage being a faster user experience (pre-reading posts will be easier that way). We’ll have to see about that, but Í see a lot of js being part of both free and premium plugins and themes and they won’t stop with that.

    When using populair js-libraries (like jQuery) it is advantageous that they are probably cached already at the visitor’s device, so that speeds up the pageload a bit. As a user I don’t mind if some of the page is still loading when the page is available to me.

    Reply
    • Both of the table related plugins you have mentioned are great. But the reason I personally stay away from it is because it include js scripts in the site and personally I try as much from plugin which adds js scripts on my site to ensure fast rendering of my site. If you are happy with those plugins then great, but I personally like to write the basic HTML on my own for mainly 2 reasons:

      1) Mostly plugin don’t follow proper table structure like table -> thead -> … then tbody -> … and if needed tfooter -> ..
      2) Sometimes I like to play with rowspan, colspan etc depending on the table need. These are much easier if you write the html on your own.

      Also the reason I use css based solution than those javascript added plugins is because I’ve designed my tables inside my theme and I like to keep the same design all over. Whether its mobile or tablet or pc. But if I use those above mentioned plugins, they will include their own design for mobile. I just personally don’t like that. So, whatever fits you most, use that. This article is mainly for people who don’t use those kinda plugins but still wanna make their tables responsive.

      Reply
  3. Well, actually the responsive table on your website doesn’t work. AMP might be the reason for that. I checked it on my newest smartfone, chrome. I can send you a screenshot.

    Reply
    • Please do send. Please note that if you are checking the AMP version of the page then it will not work as AMP pages doesn’t support any sophisticated CSS or any JS whatsoever. These are for the normal pages (without AMP)

      Reply
  4. Is it possible to add sorting or pagination functionality to an html table like this? I have a table that is 8 columns wide and 100 rows long, but I’d like to only display 25 rows at a time.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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.

Shares

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