按表格数据三次分组 - 如何显示？

Question

我需要在网站上的表格中显示一堆数据作为报告的一部分.问题是它有很多,它需要在视觉上分组.

每条数据都是项目的"用法",并且具有日期(表示何时使用),商店编号(对应于使用它的商店),项目名称(使用的项目),以及数量(使用的项目数量).

用户可以选择按项目分组,然后存储或按商店,然后是项目.在幕后,我也会按日期分组.

报告需要按项目/商店(取决于分组选项)和日期以及总和的总和来计算数量.

问题是,我不确定如何显示它.我现在能想到的最好的就像是

                           ++------+------+------+------++-----+
                           || date | date | date | date || sum |
+-----------+--------------||======+======+======+======||=====+---+
| Item Name | Store Number ||  1   |  2   |  3   |  4   ||  10 | ^ |
|           +--------------||------+------+------+------||-----|---|
|           | Store Number ||  5   |  6   |  7   |  8   ||  26 | # |
|           +--------------||------+------+------+------||-----| # |
|           | Store Number ||  9   |  10  |  11  |  12  ||  42 | # |
|           +--------------||------+------+------+------||-----|   |
|                    Total ||  15  |  18  |  21  |  24  ||  78 |   |
+==========================++===========================++=====|   |
| Item Name | Store Number ||  1   |  2   |  3   |  4   ||  10 |   |
|           +--------------||------+------+------+------||-----|   |
|           | Store Number ||  5   |  6   |  7   |  8   ||  26 |   |
|           +--------------||------+------+------+------||-----|   |
|           | Store Number ||  9   |  10  |  11  |  12  ||  42 |   |
|           +--------------||------+------+------+------||-----|---|
|                    Total ||  15  |  18  |  21  |  24  ||  78 | v |
+==========================++===========================++=====+---+
                            | < | ####              | > |
                            +---------------------------+

要按项目分组然后存储,或者将"项目名称"与"商店编号"切换为逐个商店,然后按项目.

日期列(多于四个)将向左/向右滚动,项目/商店将向上/向下滚动,以使表格保持在一个页面上.换句话说,日期标题垂直冻结,项目名称,商店编号和总和水平冻结.

问题在于实现:我如何在HTML中表示这一点!？

更好的问题是:有更好的方法吗？

你对解决这个问题的建议是什么？(最好是优雅和容易)

Answer 1

我认为最好的解决方案是按项目对数据进行分组，如下图 http://img51.imageshack.us/img51/6434/layoutsv.png

HTML 类似于以下内容：

<div style="overflow: auto; width: 100%; height: 500px">
    <h1>Item 1</h1>
    <table>
        <tr>
            <th></th>
            <th>Date</th>
            ...
            ...
        </tr>
        <tr>
            <th>Store #</th>
            <td>1</td>
            ...
            ...
        </tr>
        ...
        ...
    </table>
    <h1>Item 2</h1>
    ...
    ...
</div>

对于固定列，您应该在这里查看： 具有固定标题和固定列的 HTML 表？