Having an issue with resizing elements on a webpage. I have dynamically generated a table from JSON data and have a function that sticks the table header to the top of the page when scrolling:
var header = $("#dataheader").offset();
$(window).scroll(function() {
if($(window).scrollTop() > header.top){
$("#dataheader").css('top','0').css('background-color',white)
} else {
$('#dataheader').css('position', 'static');
}
});
The CSS width for the header and cells are set to "auto", however, this causes a problem where the header resizes when fixed to the top, misaligning the cells with the columns.
Is there a way to prevent this resizing or to set the element widths according to the columns?