Picture of Sherri Fricker
Tables on Mobile
by Sherri Fricker - Friday, 9 April 2021, 9:08 PM

What are people doing with tables to make them more readable on a mobile device? I've tested it using a table in a text block and when I look at it on mobile, it is just really skinny and hard to read. I'm open to workarounds, other tools, etc. but would like to be able to keep the at-a-glance comparison that a table offers.

Picture of John Niezen
Re: Tables on Mobile
by John Niezen - Monday, 12 April 2021, 5:54 AM

Our team is using this https://github.com/LearnChamp/adapt-table, and I added some tweaks for the padding for readability.

In the project settings I added :

.pad-cell .table-inner .table-widget table tr td{padding: 2px; }

.pad-header .table-inner .table-widget table tr th{padding: 2px; }

And in the Component, Settings add => pad-cell : pad-header

Hope this helps you on your way forward,


Picture of Matt Leathes
Re: Tables on Mobile
by Matt Leathes - Monday, 12 April 2021, 9:16 AM

some nice ideas here https://css-tricks.com/responsive-data-tables/