Is this a good solution for creating a responsive table?

I have done some Googling and some searching of old threads on Sitepoint. I expect this will be a perennial problem but I cannot see any recent discussion on Sitepoint.

I have a page that is generated by PHP that displays results in an HTML form that semantically should be in a table (a list of rooms with their length, width and area in metric and in imperial, with a checkbox to delete that room if required, on submission of the form).

I have completed this for desktop. But now wish to display it in a way that avoids horizontal scrolling on narrow screens. Googling lead me to this https://css-tricks.com/responsive-data-tables/ but it was written in 2011 and updated in 2018. To me it seems elegant and sensible. It is CSS and HTML only. Before I go trying to apply it to my page I would welcome comments from those more expert/experienced than I as to whether it is a sensible approach or does it have obvious flaws? Or are there better (easier, more elegant, more valid or any other reasons) methods?

Thank you.

That seems to be the recognised way. I know @PaulOB has a couple of Codepens, but I’ve not found a way to find anything on Codepen! :frowning:

2 Likes

Yes I have a few here and unlike the CSS tricks example they do work in IE9 (not that anyone cares these days) :slight_smile:

I also prefer to use data attributes to copy the header data as it makes more sense to me.

I did write a jquery script to automate the adding of the data attributes based on the header text.

However If you are building the table from a database then you can just build the data attributes when you build the table and won’t need the JS.

The only other option for mobile would be to have a sideways scroll with a sticky first column.

1 Like

You may be able to retain a simple table format even on small smartphones by arranging your table something like this:

Table1

2 Likes

Wow (as ever)! Thank you.
Codepens bookmarked.

Hmmm. That’s a thought.

Ah, yes - I see the sense in this - having the content in the HTML and the layout in the CSS.

1 Like

You need to consider how to deal with rooms that are L-shape and other non-rectangular shapes.

1 Like

Stop it!

OK - I know I should really.