Excel样式2d可滚动网格,CSS中带有水平和垂直标签

时间:2014-08-19 13:22:20

标签: html css grid scrollable

我试图制作一个excel类型的网格,其顶部标题和左侧标签。我希望内容可以滚动,但是顶部的标题和左侧的标签始终可见。这可能吗? E.g。

A B C D E F G 1 2 3 4

我想要的是你能够滚动但保持数字在旁边...所以向左滚动会显示:

B C D E F G H 1 2 3 4

但我也想要它,所以你可以向下滚动,仍然可以看到顶部的标题:

B C D E F G H 2 3 4 5

每个细胞可能需要保持与其标题和左手标签正确对齐的数据。

一个或另一个很容易使用overflow:在容器上自动,但是可以同时使用它们吗?

这可能是使用纯CSS还是需要javascript?

我可以定位:绝对左手标签或标头标签。这会导致出现问题:如果标题位于绝对位置,则向左滚动表格不会影响标题。如果左侧列绝对定位,则向下滚动表格不会影响左侧列。

编辑:这是我目前所拥有的:http://jsfiddle.net/sts5uh6s/2/这适用于左手标签和顶部标题,但左手标签不会滚动内容

1 个答案:

答案 0 :(得分:1)

您当前的代码在这里会有所帮助,因此我们可以看到您当前所拥有的内容,以及您尝试的路线 - 然后我们可以在此基础上进行构建。

然而,仅仅从你上面的解释,并没有自己从头开始编码 - 我建议你有一个容器DIV溢出:滚动然后我会有两个div:一个在顶部,一个在左边的位置:绝对

然而,为了获得逐个细胞' excel的滚动行为我认为您将不得不考虑使用CSS以外的其他东西。