I have a table that shows tabular data across 7-8 columns, which works very well on a standard monitor.

However, on a smartphone or even a tablet, it's a little less functional.

Is there a way to automatically condense the data into fewer columns when the page is being view mobile devices?

I can detect the user-agent OK, and can use CSS to set off the different data elements.

What I don't know is how to set up the columns differently, I'd really like to set it in 1-2 columns on a mobile device.

Perhaps this belongs in the PHP area, but I'm not sure.

The key is that I'm not using tables for layout, this is tabular data being pulled out of a database.

4 Years
Discussion Span
Last Post by Violet_82

This is always a problem with tabular data on a phone or tablet ... just not enough room for a big table.

What you could do is have a seperate table that is only shown, after the other is hidden, using media queries.

Another option is to check for a phone or tablets user agent and dynamically change the number of rows shown. Only issue with that is the User Agents for some of the higher end phones are becoming indistinguishable from a desktops.


Agree with ggamble, but some time ago I had a similar problem (personally I wouldn't use a table on a mobile site unless the client specifically requires you to do so, otherwise I would find a different way to display information), but you can have a look at responsive tables. Mind you though, I doubt this solution is the best thing for accessibility, nonetheless it works really well...http://css-tricks.com/responsive-data-tables/

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.