14

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

在此处输入图像描述

只有粉红色部分必须水平和垂直滚动，但其他部分必须在滚动期间保持可见。我的桌子在一个 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？

如果有人可以帮忙。

4

2 回答 2

5

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

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

您所需要的只是包含 JS 和 CSS 文件，然后简单地添加class='responsive'到您的表格元素中。

我试图用你的代码来实现它，但是行跨度有一些问题，所以稍微调整了一下。

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

我认为您也希望以类似的方式进行垂直滚动。让我知道我是否应该帮忙？

于 2013-08-09T13:27:37.223 回答
3

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

在我的解决方案中，我有一个表，在它的主题部分是我想要冻结的行（你可以为第一个单元格设置行跨度）。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
        });
于 2013-10-02T08:15:00.930 回答