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.
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
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]
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
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
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
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:
posted by mistersquid at 1:58 PM on November 5, 2011
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:
posted by mistersquid at 2:00 PM on November 5, 2011
.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
This thread is closed to new comments.
posted by tylerkaraszewski at 10:08 AM on November 5, 2011