Join 3,553 readers in helping fund MetaFilter (Hide)


how to change no. of table columns for mobile browser?
November 5, 2011 9:50 AM   Subscribe

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) 1 user marked this as a favorite
 
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


« Older William James was an astoundin...   |  Work is ending next week, noth... Newer »
This thread is closed to new comments.