表固定头和第一列css / html [英] Table fixed header and first column css/html

问题描述

我有一个表有大量的行和列。但我想要标题固定和第一列固定。这是我需要的图片。

I have a table that has a large number of line and columns. But I would like to have the header fixed and the first column fixed. Here is a picture of what I need.

只有粉红色部分必须水平和垂直滚动，而其他部分必须在滚动期间保持可见。我的表是在一个div。
首先，我应该使用一个表还是四个（蓝色的，红色的，绿色的和粉红色的）？

Only the pink part must scroll horizontally and vertically but the others must stay visible during the scrolling. My table is in a div. First, should I use one table or four (the blue one, the red one, the green one and the pink one) ?

小提琴：

http://jsfiddle.net/ 5XWqj / 1 /

我尝试修复标题，但我不成功

I tried to fix the header first but I wasn't a success

#container thead {
    position: fixed;
    top: 0;
}

并选择并修复第一列

#container tbody tr td:first-child {
    position: fixed;
    left: 0;
}

但它不是修复包裹我的表的div。
也许我需要一些jQuery或JavaScript？

but it's not fixing about the div that wrap my table. Maybe I will need some jQuery or JavaScript?

如果任何人可以帮助。

推荐答案

可能你正在寻找这样的东西：

May be you are looking for something like this:

http://zurb.com/playground/playground/responsive-tables/index.html

所有您需要的是包括JS和CSS文件，只需添加 class ='responsive'到您的表元素。

All you need is include the JS and CSS files and simply add class='responsive' to your table element.

用你的代码实现，但是有一些问题，rowspan，所以调整了一点。

I tried to implement that with your code, but there was some issue with rowspan, so tweaked it a bit.

http://jsfiddle.net/UqYgq/3/

我想你也想要类似的垂直滚动。让我知道我是否应该帮助？

I think you also wanted vertical scrolling in similar fashion. Let me know if I should help with that?

这篇关于表固定头和第一列css / html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！