我可以垂直包裹一张桌子吗？

Question

我有一张比它宽得多的桌子。

我想知道是否可以垂直制作表格，以便不会滚动查看数据，而是将表格“包装”到页面的未使用部分。

这是我想要的基本格式

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

我的想法是我可以通过javascript管理所有内容，但在我努力工作之前，最好的方法是什么？

Answer 1

不是100％确定你的意思，但我假设您希望表格的列数更多或更少，具体取决于可用页面空间的高度。

如果是这种情况，我建议使用无序列表并更改UL的宽度。

我假设您可能需要一些核心函数来计算可以适合页面高度的行数。如果所有的LI都是相同的，你可以通过获得其中一个的高度，然后获得你可用的页面或空间的整体高度来做到这一点。

如果你需要，可以对LI进行重新排序James Padolsey创造了一个很棒的jquery插件。 http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Answer 2

CSS多列布局模块可以轻松完成此任务，但目前并非所有浏览器都支持，只支持Firefox和Webkit。

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

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

我还不知道有任何用于此功能的嵌入式JavaScript兼容性工具。

Answer 3

这个怎么样..

<强> Live Demo

<小时/>

说明：

• 表格必须包含<thead>和<tbody>
• 在许多情况下可能会中断（colspan，rowspan，空单元格）
• 某些样式依赖于CSS3
• 代码未精简