Member Avatar for scaiferw

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.

  • 3 Contributors
  • 2 Replies
  • 263 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for BMXDad

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.

Member Avatar for Violet_82

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/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.