Saltar navegación

[Resuelto] converting table to be responsive

This support ticket is created hace 10 meses, 3 semanas. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

Este tema contiene 8 respuestas, tiene 3 mensajes.

Última actualización por Minesh hace 10 meses, 1 semana.

Asistido por: Minesh.

Autor
Mensajes
#2681894

Hi, I need to change some tables on my website eg. enlace oculto 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

#2682046

Nigel
Supporter

Idiomas: Inglés (English ) Español (Español )

Zona horaria: Europe/London (GMT+00:00)

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.

#2682081

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

#2682097

Nigel
Supporter

Idiomas: Inglés (English ) Español (Español )

Zona horaria: Europe/London (GMT+00:00)

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.

#2682154

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

#2682366

Hi Nigel, Would these ideas enlace oculto , enlace oculto work in a Toolset View?

#2682552

Minesh
Supporter

Idiomas: Inglés (English )

Zona horaria: Asia/Kolkata (GMT+05:30)

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.

#2683027

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

#2683364

Minesh
Supporter

Idiomas: Inglés (English )

Zona horaria: Asia/Kolkata (GMT+05:30)

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
- enlace oculto