Making tables responsive in the WordPress editor

Making HTML tables responsive can be a tricky task. There are many approaches available, but not all are suitable for a content management system.

The brief:

We want the ability to create tables within the WordPress that are easy to edit using the WordPress content editor and do not require any HTML changes by the user.

These tables also need to to be responsive so that the interface adapt to the users device without distorting the information. Any tables will need to be accessible too – so we need to retain the valid markup and ensure that headers are assigned correctly.

My solution:

There are two things that we need to do: amend the HTML to add some classes and a <div> wrapper so that we can control the styling; and add the appropriate styling for the tables to be responsive.