Building Responsive Tables with CSS & HTML or WordPress

Building Responsive Tables with CSS & HTML or WordPress

An HTML table is used for storing data or information. A table is often a key component in webpage building so it is important that we know how to create responsive tables in the era of the responsive web design.

There are several different types of HTML tables and today we are going to take a closer look at them to better understand their purpose and creation of the responsive tables with CSS & HTML or WordPress.

Table of contents

Responsive Design and responsive tables
Responsive tables approaches
How to create responsive tables (with examples)
Ending thoughts

Responsive Design and responsive tables

If we want to understand responsive tables better, first we need to know what it means when we say that a design is responsive.

Responsive design is the design that is adjustable to the screens of different sizes. When we talk about an HTML image or table, it’s all about what happens when the screen is narrower than the minimum width of a data table.

Responsive Tables as a Part of a Responsive Design

Making tables responsive has been quite a challenge since the introduction of the responsive web design.

Data tables are often quite wide and a single row of data often needs to be kept together if we want it to actually make sense. Of course, tables can flex in width, but is that really a solution? Well, it can be until the point when they start wrapping cells contents in a way we don’t want them to. There is also a point where they simply can’t go any narrower.

Luckily, there are 3 patterns that can help us solve this problem:

  1. The Horizontal Overflow

The horizontal overflow table in HTML can be easily seen whole by simply scrolling right and left. The first field is usually fixed and the others become visible as the user scrolls through the content.

There is one downside, however. The user might not know or notice that the table is scrollable. If that happens, there is a chance they will miss most of the table. To avoid the possibility of the user not seeing the most important content, the key fields should be in the first 3 columns.

  1. The Transitional Tables

A transitional CSS table is a good solution if you want to avoid scrolling that is the necessary part of viewing the horizontal overflow tables.

What happens with this table it that the field titles are formatted at lower CSS breakpoints to a row format instead of a column structure.

Unfortunately, there is also a downside. A transitional table CSS diminishes scanability and field comparison.

  1. The Priority Tables

The priority tables simply hide fields on lower screen sizes. The tables formatted like this usually look beautiful but the problems occur if the omitted fields were, in fact, the most important ones.

Responsive Table Approaches

There are several ways to make responsive tables.

  • Squash–you can squash table HTML horizontally by moving HTML table border if there isn’t much content in the columns. By doing this, you can avoid changing the entire layout of your table
  • Vertical scroll–if you want to avoid changing the content and/or the layout of your table,by all means, the users can scroll to the left and right to see the full table
  • Collapse by rows – you can turn your table into several smaller tables by splitting each row into its own single column
  • Collapse by columns – you need to learn HTML to do this because this part is a bit tricky. In CSS style tables, the code order is by rows and the locked-in<tr> wrappers. If you want to collapse your table by columns, you have either to manipulate with JavaScript or to change the markup.

Things to Avoid when Building a Responsive Table

People have tried many different methods of building responsive tables and here are some that are not particularly effective. You should probably avoid them altogether.

    1. Using JavaScript to generate a second narrower table, then alternately hide and show by breakpoint. This method will break up unique IDs in the tables.
    2. Using JavaScript and normal table markup at a breakup to rearrange the table. Horizontal and vertical tables require different markups while this method also requires DOM manipulation and many JS event listeners.
    3. Keeping table markup and switching to display:flex for vertically aligned table content.

NOTE: If all of the above sounds too complicated to even try – don’t get discouraged. There are simpler ways to create responsive tables. You can visit w3schools.com for more useful tips (w3schools HTML offers a variety of explanations HTML help for the website builders). So let’s take a look at some of the tools that you might find useful.

How to create responsive tables

For WordPress

wpDataTables

wpDataTables is a best-selling WordPress plugin which makes your work with tables, charts and data management easy. 17,000+ companies and individuals already trust this WordPress tables plugin to work with financial, scientific, statistical, commercial and other data.

For Bootstrap

FooTable

A responsive table plugin built on jQuery and made for Bootstrap.

For Foundation

Responsive Table with Foundation

Responsive jQuery tables

Basic Table

A simple lightweight jQuery responsive table library. A library to setup tables for a basic responsive table structure.

Material Design Responsive Table

Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7 You can use this table in Bootstrap (v3) projects. Material Design Responsive Table CSS-style will override basic bootstrap style.

Responsive Table with json data

Responsive table with just CSS

Simple Responsive Table in CSS

This is a relatively well-known pattern for responsive tables, but it’s worthwhile to give a reminder or FYI to the new folks.

Responsive Table Solution

Really Responsive Tables using CSS Flexbox (complex)

Really Responsive Tables using CSS Flexbox – part 4. A complex example with lots of different kinds of fields, and a very custom wrapping logic. This is part of the Really Responsive Tables pen collection.

Pure CSS Responsive Table.

Responsive Table

Changes table layout to work in mobile size screens. This is adapted from Geoff Yuen’s Responsive Table design.

Responsive Tables with Flexbox

Responsive Tables (by rows)

This Pen is a fork of Davide Rizzo’s Pen Responsive Tables (By rows).

Responsive Tables (By columns)

This Pen is a fork of Davide Rizzo’s Pen Responsive Tables (By columns).

Responsive Tables (Cell styles)

Responsive Tables (Collapse)

This Pen is a fork of Davide Rizzo’s Pen Responsive Tables (Collapse).

Ending thoughts on how to create responsive tables

In the era of the responsive design, we have to make sure that our tables behave responsively. Luckily, it is not as difficult as it may sound.

Adjusting CSS table border and creating responsive CSS tables or HTML images and tables can give you a hard time if you don’t know what you’re doing. However, with the help of a few useful plugins and extensions, building responsive tables should be easier than ever.

wpDataTables can be the perfect solution. The best-selling plugin is already a choice of more than 17,000 businesses online. wpDataTables can handle any complex data, be it a financial, scientific, statistical, commercial or any other information – you will get the pixel-perfect table every time.

If you enjoyed this article about creating responsive tables with CSS & HTML or WordPress, you should also read these:

Up Next:

What WordPress portfolio plugin to install? We'll help with that

What WordPress portfolio plugin to install? We'll help with that