By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

CSS: formatting tables for screen and handheld

P: n/a
Hi,
I want to have a table for screen layout like this:

One Two Three Four
One Two Three Four

When i access the page via handheld, i want that table to look like
this:

One Two
Three Four

One Two
Three Four

How can i solve this in HTML / CSS?
Feb 20 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
noodyn wrote:
Hi,
I want to have a table for screen layout like this:

One Two Three Four
One Two Three Four

When i access the page via handheld, i want that table to look like
this:

One Two
Three Four

One Two
Three Four

How can i solve this in HTML / CSS?
Theoretically, I think this should do it:

@media handheld {
table.flexTable { display: block; overflow: hidden; }
table.flexTable tr { display: block; clear: left; }
table.flexTable td { display: block; float: left; }
}

IE on Windows Mobile 5, however, only applies @media handheld to the
first property within its scope, so for testing I had to wrap each rule
in a separate @media handheld rule. And then it wrapped each cell to the
next line. So then I changed block to inline-block for the td rule, but
then no wrapping occurred at all. So I give up.
Feb 20 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.