Reputation: 1708
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) ?
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?
If anyone could help.
Upvotes: 14
Views: 23106
Reputation: 2403
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/
In my solution I have one table, in its thead section 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.
DataTables plug-in init I used:
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
});
Upvotes: 3
Reputation: 717
May be you are looking for something like this:
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.
I tried to implement that with your code, but there was some issue with rowspan, so tweaked it a bit.
I think you also wanted vertical scrolling in similar fashion. Let me know if I should help with that?
Upvotes: 5