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.