I am trying to fix the thead on top during table scroll here, without any results.
I tried via JS like this, but does not works...
<script>
document.getElementById("tablepress-10").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thead").style.transform = translate;
});
</script>
and i also tried this JS
<script type="text/javascript">
jQuery(document).ready(function($){
var table = $("#tablepress-10");
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop > table.offset().top) {
$("thead", table).addClass("Fixed").css("top", windowTop);
}
else {
$("thead", table).removeClass("Fixed");
}
});
});
</script>
CSS:
#tablepress-10 thead.Fixed
{
position: absolute;
}
EDIT: i also tried this withour results
<script>
jQuery(document).ready(function($){
// Change the selector if needed
var $table = $('table.tablepress-id-10'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
});
</script>
CSS
Hvae you any tips?
Thanks in advice :D
PS: I am using Wordpress.
