Can I wrap a table vertically?

I have a table that is much taller than it is wide.

I want to know if it's possible to make the table wrap vertically so that instead of scrolling to see the data, the table '开发者_如何学Gowraps' to the unused portion of the page.

This is the basic format I want

01   05   09
02   06   10
03   07   11
04   08   12

My thought is that I could manage it all via javascript but before I do things the hard way, what's the best way to approach this?

How about this..

Live Demo

Notes:

• Table must have <thead> and <tbody>
• Probably breaks under many conditions (colspan, rowspan, empty cells)
• Some styling dependent on CSS3
• Code is not streamlined

Not 100% sure what you mean but I'm assuming that you want the table's to have more or less columns depending on the height of the available page space.

If this is the case I'd suggest using an unordered list and changing the width of the UL.

I assume you might need to have some core function which calculates the number of rows that can fit into the page height. If all the LI s are the same you can do this by getting the height of one of them and then overall height of the page or space you have available.

To reorder the LI s if you need this James Padolsey has create a great jquery plug in. http://james.padolsey.com/javascript/sorting-elements-with-jquery/

CSS Multi-column Layout Module can accomplish this easily but is not supported in all browsers, only Firefox and Webkit so far.

http://www.w3.org/TR/css3-multicol/

http://html5.litten.com/css3-series-multiple-columns/

I'm not aware of any drop-in JavaScript compatibility tools for this functionality, yet.