[Resolved] converting table to be responsive

[Author]

Posts

[davidm-13]

Hi, I need to change some tables on my website eg. hidden link at bottom of page.
These tables are not mobile responsive. What would be the best way to make them responsive - I also need them to have sticky headers and the first (left) column.
Any help much appreciated

[Nigel]

Hi there

This is not an area that Toolset is well equipped to handle, the tables generated by a View are not responsive, and cannot readily be converted to responsive without quite a bit of work.

One solution is to not use HTML tables, and instead to use a responsive grid, to simulate a table-like output, which collapses on smaller screens. You can see a discussion of that here: https://toolset.com/forums/topic/responsive-table-2/

There are better modern solutions for responsive tables, but they would essentially need to be manually implemented, modifying the output of the View to generate the required markup that went along with the chosen custom styling. Try searching codepen.io for css-only responsive tables for suggested solutions.

I'm sorry that there is no off-the-shelf solution I can recommend.

[davidm-13]

Thanks for this Nigel, Could I use a WordPress Table Block on the problem page?

[Nigel]

That is for inserting a static table, I can't see how you would dynamically add and populate rows from the output of a View. And it's not obvious to me that that block is responsive in any case.

I don't think there is any alternative to getting your hands dirty and working with the HTML and CSS, and thinking about how to have a View dynamically generate the HTML in the format required.

[davidm-13]

Hi Nigel, So maybe you could give me a few pointers about how I'd implement a css grid in place of a responsive table with sticky header and first (left column). Appreciate any tutorial links or code snippets .

Thanks

[davidm-13]

Hi Nigel, Would these ideas hidden link , hidden link work in a Toolset View?

[Minesh]

Media query should work without any issues subject to it should applied to correct element with media query rules.

It should work as its custom code you will have to apply and test.

[davidm-13]

Hi, I'm working on making the tables responsive and making progress. I still have some points I would appreciate help with.
I'm trying to target the text in the first td in the row and so far have not been able to change font-size or weight in the media
query to make it responsive to device size / orientation. I'm also unable to change the width of the table to 100% and align
thead th with tbody td
Appreciate any help you can offer.
Thanks

[Minesh]

You want to customize your layout based on the device orientation and you will have to use media query CSS for the same.

Here is the link that might help you:
- https://stackoverflow.com/questions/38897851/how-to-change-color-in-first-td-in-my-table-using-class
- hidden link