I’ve been wondering: whenever I have a table that’s more than two columns wide, it won’t fit on any browser shrunk down to 100px width. This means mobiles who can zoom have to zoom out of my pages just because of the table, right? And those who don’t zoom get a scrollbar?
Is there some way I haven’t heard about for having tables fit on mobiles?
I’m mostly talking about the smaller mobiles, the 100-200px ones.
3.6 suggests turning tables into lists for mobile devices. I can’t see any other reasonable way to do it.
If you’re trying to present a non-trivial data table for old-school mobile phones with a narrow vertical screen, you’re going to struggle. It’s a bit like trying to fit an antique chair through a letterbox - you can only see a small bit at a time, or else you have to dismantle the whole thing, which will probably render it worthless.
I tend to take the view that a data table is one of the few times when a horizontal scrollbar may be justified, if it is needed to preserve the integrity and structure of the table. It depends if the data is going to be understandable if it is reduced to a series of lists, I guess sometimes it might well be, but other times it will just become a load of gibberish.
Of course, smartphones with large screens and aspect switching resolve this problem nicely, and you can get a good size table on those in landscape mode!
why not just convert the table into css or code a mobile friendly page.
Because sometimes tables are correctly used for tabular data, rather than just being abused for layout purposes, and so you do need to try to maintain some semblance of order to them.
How would you code this page without using tables, and still preserving the relationship between the various elements?
<snip />
I tend to take the view that a data table is one of the few times when a horizontal scrollbar may be justified, if it is needed to preserve the integrity and structure of the table. It depends if the data is going to be understandable if it is reduced to a series of lists, I guess sometimes it might well be, but other times it will just become a load of gibberish.
Of course, smartphones with large screens and aspect switching resolve this problem nicely, and you can get a good size table on those in landscape mode!
At some point we HAVE to start thinking about logical limitations.
how can i get my 300px 400px img to be viewable ina 100 X200px screen w/o scroll or zoom?
you have to realize that THAT’s the reason scroll and zoom is there. there si nothing wrong with scrolling or zooming a large table. You have done well, already… no need to worry. Anything else is a compromise.
Table is nightmare for me even NOT in mobile… I rarely handle them manually
you have to realize that THAT’s the reason scroll and zoom is there. there si nothing wrong with scrolling or zooming a large table. You have done well, already… no need to worry. Anything else is a compromise.
Yeah, I don’t mind scrolling, but phones with zoom are zooming out to “fit” the tables which makes text unreadable. With my browsers shrunk I have also found sometimes the main page element carrying the contrasting background colour ends after the initial scroll point, so now I’m careful to add background colours to these tables on for-mobile sites.
Making them into lists would be difficult. Many of them are insurance tables. Then again, I suspect my bosses figure no real human beings are reading these anyway : )
This is… a neat idea. That it pukes in IE doesn’t bother me much because I build my base stylesheet for everyone and then layer “desktop” on top with media queries, and then a CC for IE less than 9, desktop.css… so Windows mobile users are really the only ones getting shafted I would believe, and oh well, my heart breaks.
I’m pretty sure I’m going to check this out, as I still hadn’t otherwise found a solution to my insurance data tables for mobile. This Is Cool.