how to change no. of table columns for mobile browser?

November 5, 2011 9:50 AM

Anyone know how I can change the number of columns on an HTML table when it is viewed from a mobile browser? I want to display a 5 column table if the site is viewed from a desktop, but want the table to be just 1 column if viewed from a mobile device. Can this be done easily? I only know basic html.
posted by janetplanet to technology (8 answers total)

Not with basic HTML, no. You would need to use javascript or a server-side scripting language (i.e., PHP).
posted by tylerkaraszewski at 10:08 AM on November 5, 2011

Do you want the extra columns to be removed/hidden, or do you want to display all of the information still, just using one column?
posted by rhizome at 10:30 AM on November 5, 2011

You need to search for responsive data tables, here's an example from Chris Coyier.
posted by humph at 10:31 AM on November 5, 2011 [3 favorites]

Or, apparently, humph's fancy CSS trick, as long as you don't actually need your table to be a table (but at 1 column wide, it's not really a table any more anyway). None of these are "Basic HTML", though.
posted by tylerkaraszewski at 11:00 AM on November 5, 2011

At one column it's still totally a table; you still have rows. It's not "basic" HTML but CSS is not rocket science.
posted by june made him a gemini at 11:17 AM on November 5, 2011

If the content of your table is not negatively impacted form being displayed in 1 column vs 5 columns, I would question whether it should really be in a table in the first place. Maybe it should be in a series of divs, which can gracefully wrap when the screen width gets too narrow (min-width or whatever)
posted by misterbrandt at 1:10 PM on November 5, 2011

Yes, you can have one column visible for mobile devices.

Detect whether the user agent is a mobile device and deliver to those devices a special stylesheet, call it "mobile.css".

In your markup, give the TDs which are to be invisible a class. "hide-from-mobile" is a nice descriptive class name.

Include the following selector and declaration in your style sheet:

.hide-from-mobile{
   display:none
}

done
posted by mistersquid at 1:58 PM on November 5, 2011

Improved CSS:

.hide-from-mobile{
     display:none;
}

(Added a semicolon at the end of line. While not necessary here, a semicolon would necessary if other declarations followed.)
posted by mistersquid at 2:00 PM on November 5, 2011