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
  • 281 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

A few practical patterns that work well for real tabular data (instead of user-agent sniffing) are: 1) collapse low-priority columns with CSS, 2) provide a simplified alternate view for small screens, or 3) reflow each row into a stacked “card” so each cell shows its header label. These match what and suggested, but with concrete, accessible implementation notes below.

A common, easy-to-generate approach is adding header labels into each data cell (server-side while rendering) and then switching layout with a media query. Example HTML for one row:

<tr>
  <th scope="row">Order #</th>
  <td data-label="Customer">Acme Co</td>
  <td data-label="Total">$123.45</td>
  <td data-label="Status">Shipped</td>
</tr>

Then on small screens make rows display as blocks and show data-label before each cell:

@media (max-width:600px){
  table, thead, tbody, th, td, tr { display:block; }
  td::before { content: attr(data-label) ": "; font-weight:bold; }
}

If only a few columns need hiding, use priority classes added during server-side rendering (e.g., class="col-optional") and hide them with a small media query instead of reflowing the entire table. That lets important columns remain a true table for screen readers while optional columns go away visually:

@media (max-width:600px){
  .col-optional { display:none; }
}

Accessibility and testing notes: avoid relying on UA detection (it breaks as devices converge). Preserve semantic <th> elements for keyboard and screen-reader users even if they are visually hidden. If reflowing to non-table visuals, keep the underlying table in markup or provide an ARIA-friendly alternate view. Always test with real devices or device emulators and with a screen reader to confirm the chosen pattern still communicates the relationships between headers and values.

Recommended Answers

All 2 Replies

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.