CSS: formatting tables for screen and handheld

[noodyn]

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?

[Harlan Messinger]

Re: CSS: formatting tables for screen and handheld

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.