Sticky table headers with firefox / IE

Question

I am using a div with display:table and I am trying to create sticky headers. Chrome supports position:sticky with display:table-row but firefox and IE do not. Therefore, I created a code that changes the div position to "fixed" on scroll and the top to 0. This gets the same result.

However, when changing the position to "fixed" the header row stops being a part of the table and therefore it's width is changed. (And is no longer synced with the other table rows)

I tried to fix it with saving the width of each column and then setting it again, but that's extremely buggy.

I am looking for a solution that will allow me to change the position to "fixed" but will not change the top row width and it will stay connected with the rest of the table.

Any ideas?

$(window).scroll(function() 
{
  	if (window.pageYOffset >= $('.table').offset().top) 
	{
		$('.row_header').css('position','fixed');
		$('.row_header').css('top',0);
	}

	else
	{
	
		$('.row_header').offset({ top: $('.table').offset().top});
		$('.row_header').css('position','static');
		
		//console.log('satic');
	}

});

.wrapper{

padding:10px;


 
  display:flex;
  justify-content:center;
  align-items:center;
}

.table{
  display:table;
  margin: 0 0 40px 0;
 max-width: 100%;
  
}

.row {
  display: table-row;

}

.cell {
  display: table-cell;
  border:1px solid black;
  padding:2px;


}

.row_header {
	display: table-row;

 background: #ADD8E6;


}




Scroll to see the problem...


	
		Name
		Age
		Site
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow
	
	
		David
		33
		Stack overflow

Sticky table headers with firefox / IE

Answers (1)

Related Questions