467,879 Members | 1,090 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,879 developers. It's quick & easy.

CSS: formatting tables for screen and handheld

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
  • viewed: 2291
Share:
1 Reply
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.

Similar topics

1 post views Thread by Brian | last post: by
2 posts views Thread by Philipp Lenssen | last post: by
40 posts views Thread by Mason A. Clark | last post: by
4 posts views Thread by Gary Finnigan | last post: by
1 post views Thread by Garmt de Vries | last post: by
26 posts views Thread by Thomas Mlynarczyk | last post: by
9 posts views Thread by Les Juby | last post: by
8 posts views Thread by Steve Macleod | last post: by
2 posts views Thread by fjohnson | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.