/    Sign up×
Community /Pin to ProfileBookmark

Using fewer table columns on mobile version of page

Copy linkTweet thisAlerts:
Jul 03.2013

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.

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Nicholas_DiazJul 09.2013 — if you want the page to be different you could detect a mobile device with php and then redirect to a page with the same information but meant to be displayed on a mobile device.

or use media queries and rearrange the layout of the page.

do a Google search for responsive web design RWD
×

Success!

Help @scaiferw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...