表固定标题和第一列 css/html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18146581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table fixed header and first column css/html
提问by Loric-
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.
我有一个包含大量行和列的表格。但我想固定标题并固定第一列。这是我需要的图片。
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) ?
只有粉红色部分必须水平和垂直滚动，但其他部分必须在滚动过程中保持可见。我的桌子在一个 div 中。首先，我应该使用一张桌子还是四张桌子（蓝色一张，红色一张，绿色一张和粉红色一张）？
I have written this fiddle:
我写了这个小提琴：
I tried to fix the header first but I wasn't a success
我试图先修复标题，但我没有成功
#container thead {
position: fixed;
top: 0;
}
and something like this to select and fix the first column
和这样的东西来选择和修复第一列
#container tbody tr td:first-child {
position: fixed;
left: 0;
}
but it's not fixing about the div that wrap my table. Maybe I will need some jQuery or JavaScript?
但它并没有解决包裹我桌子的 div。也许我需要一些 jQuery 或 JavaScript？
If anyone could help.
如果有人可以帮忙。
回答by Nirav Zaveri
May be you are looking for something like this:
可能你正在寻找这样的东西：
http://zurb.com/playground/playground/responsive-tables/index.html
http://zurb.com/playground/playground/responsive-tables/index.html
All you need is include the JS and CSS files and simply add class='responsive'to your table element.
您所需要的只是包含 JS 和 CSS 文件，然后简单地添加class='responsive'到您的表格元素中。
I tried to implement that with your code, but there was some issue with rowspan, so tweaked it a bit.
我试图用你的代码来实现它，但是 rowspan 有一些问题，所以稍微调整了一下。
I think you also wanted vertical scrolling in similar fashion. Let me know if I should help with that?
我想你也想以类似的方式垂直滚动。让我知道我是否应该帮助解决这个问题？
回答by fandasson
I solved same problem with only one table and DataTables plugin with FixedColumn extension. You can see demo of the extesion: http://datatables.net/release-datatables/extras/FixedColumns/
我只用一个表和带有 FixedColumn 扩展名的 DataTables 插件解决了同样的问题。你可以看到扩展的演示：http://datatables.net/release-datatables/extras/FixedColumns/
In my solution I have one table, in its theadsection are rows I want to have frozen (you can you rowspan for the first cell). And the FixedColumn extension froze first two columns for me.
在我的解决方案中，我有一个表格，在它的thead部分是我想要冻结的行（您可以为第一个单元格设置 rowspan）。而 FixedColumn 扩展为我冻结了前两列。
DataTables plug-in init I used:
我使用的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
});
