Update: And yes, the WRAP plugin is really needed! To prevent the css from having sideeffects on other tables on other pages: wrap your table and give it a name! <WRAP my_table> <datatables ... </datatables> </WRAP>
Then, change your css selector and add the second column (col1
) to /conf/userall.css
, like so:
div.wrap_my_table div.dataTables_scroll td.col0,
div.wrap_my_table div.dataTables_scroll th.col0,
div.wrap_my_table div.dataTables_scroll th.col0:hover,
div.wrap_my_table div.dataTables_scroll td.col1,
div.wrap_my_table div.dataTables_scroll th.col1,
div.wrap_my_table div.dataTables_scroll th.col1:hover {
position: sticky;
left: 1px;
outline: 1px solid #bbb;
z-index: 1000;
background-color: rgb(246,246,246) !important;
}
Plus you need the following additional javascript in /conf/userscript.js
. Just replace in in the first line my_namespace:my_page
with your page id and 3xwrap_my_table
according to your table's name:
if ( JSINFO['id'] == 'my_namespace:my_page' && JSINFO['ACT'] != 'edit' ) {
setTimeout( function() {
var $offset_col1 = jQuery("div.wrap_my_table div.dataTables_scroll th.col0").width() + 20; // 2x(padding 0.5em (8px) + border 1px + outline 1px)
jQuery("div.wrap_my_table div.dataTables_scroll th.col1").css('left', $offset_col1 );
jQuery("div.wrap_my_table div.dataTables_scroll td.col1").css('left', $offset_col1 );
}, 300);
}
For more columns (and more than one table on more than one page) this code can be expanded accordingly.
Update: Tell me what you need and I can adjust it for you! A simple example: I just made the first and 4th column sticky in my table. To do that, change th.col1
to th.col3
and td.col1
to td.col3
(in both css and js codes). Try it out! Works like a charm! :-)
Cheers!