Is this a good solution for creating a responsive table?

HTML & CSS
1

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.

2

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
3

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.

https://codepen.io/paulobrien/pen/NNGdmx

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.

https://codepen.io/paulobrien/pen/LBrMxa

1 Like
4

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

Table1

2 Likes
5

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

6

Hmmm. That’s a thought.

7

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

1 Like
8

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

1 Like
9

Stop it!

OK - I know I should really.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.