带有 Firefox / IE 的粘性表头答案

【问题标题】：Sticky table headers with firefox / IE带有 Firefox / IE 的粘性表头
【发布时间】：2018-01-24 07:30:48
【问题描述】：

我正在使用带有 display:table 的 div，并且我正在尝试创建粘性标题。 Chrome 支持 position:sticky 和 display:table-row 但 Firefox 和 IE 不支持。因此，我创建了一个代码，将 div 位置在滚动时更改为“固定”，并将顶部更改为 0。这得到了相同的结果。

但是，当将位置更改为“固定”时，标题行不再是表格的一部分，因此它的宽度发生了变化。（并且不再与其他表行同步）

我试图通过保存每列的宽度然后重新设置来修复它，但这非常有问题。

我正在寻找一种解决方案，可以让我将位置更改为“固定”，但不会更改顶行宽度，并且它将与表格的其余部分保持连接。

有什么想法吗？

$(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;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<p align=center><b>Scroll to see the problem...</b>
<div class="wrapper">
<div class="table">
	<div class="row_header">
		<div class="cell">Name</div>
		<div class="cell">Age</div>
		<div class="cell">Site</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	<div class="row">
		<div class="cell">David</div>
		<div class="cell">33</div>
		<div class="cell">Stack overflow</div>
	</div>
	
	
	
	
</div>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

好吧，这是一个艰难的解决方案，但这是解决方案，我之前在这个解决方案上花了很多时间。：/

首先你在.row_header中添加两个span元素：

.static 用于标题单元格比其他内容长很多的情况。如果此元素不存在，.fixed 元素将与该列中的最大单元格宽度一样长。如果它比单元格内容短，则会溢出到下一个单元格。
.fixed 用于使标题内容具有粘性。

一旦 DOM 加载并呈现表格，您就可以计算每列的单元格大小，因为它们是由表格任意呈现的。在示例中，我从 .row_header 计算得出 - 没关系，因为它首先与所有表格内容一起呈现。然后将此宽度应用于.row_header 内的span 元素。

我从你那里拿走了其余的东西。有点晚了，有点累了，但我相信你可以避免任意设置负边距来对齐.fixed 跨度。但是，整个想法和实现都在这里。

这是一个有效的小提琴：

https://jsfiddle.net/k7ep2Lq0/1/

【讨论】：

谢谢！我最终使用了不同的解决方案，但您的回答让我找到了解决方案。
那么......也许可以通过选择这个作为解决方案来给予一些信任？
有没有机会不用JS？
@DavidSomekh 你能分享你的解决方案吗？