表固定标题和第一列css / html

Question

我有一个包含大量行和列的表。但我想修复标题并修复第一列。这是我需要的图片。

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

我写过这个小提琴：

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

我首先尝试修复标题，但我没有成功

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

和类似的东西来选择并修复第一列

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

但它没有修复包裹我的桌子的div。 也许我需要一些jQuery或JavaScript？

如果有人可以提供帮助。

Answer 1

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

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

您只需要包含JS和CSS文件，只需将class='responsive'添加到您的表格元素即可。

我尝试用你的代码实现它，但是rowpan存在一些问题，所以稍微调整了一下。

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

我认为你也想以类似的方式进行垂直滚动。如果我应该帮忙，请告诉我？

Answer 2

我只用一个表和带有FixedColumn扩展名的DataTables插件解决了同样的问题。 您可以看到extesion的演示：http://datatables.net/release-datatables/extras/FixedColumns/

在我的解决方案中，我有一个表，在 thead 部分是我想要冻结的行（你可以为第一个单元格设置行数）。而FixedColumn扩展为我冻结了前两列。

我使用的DataTables插件init：

duplicatesTable = $('.js-merge-duplicates-table').dataTable({
            //I want standard table look - no DataTables features but frozen header
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": false,
            "sScrollX": "100%",
            "sScrollY": "500",
            "bScrollCollapse": true
        });
        new FixedColumns(duplicatesTable, {
            "iLeftColumns": 2, //maybe you would need only one column
            "iLeftWidth": 350
        });