与firefox / IE的粘表标头

时间：2018-01-23 20:52:10

标签： javascript jquery html css

我正在使用带 display：table 的div，我正在尝试创建粘性标头。 Chrome支持位置：粘性， display:table-row ，但Firefox和IE不支持。因此，我创建了一个代码，在div上将div位置更改为“fixed”，将top更改为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>

1 个答案:

答案 0 :(得分：1)

嗯，这就是一个艰难的问题，但是这里有解决方案，我以前花了很多时间在这个问题上。 ：/

首先，在span：

中添加两个.row_header元素
  • .static用于标题单元格比其他内容长很多的情况。如果此元素不存在，则.fixed元素将与该列中的最大单元格宽度一样长。如果它比细胞含量短，它会溢出到下一个细胞。
  • .fixed用于使标题内容变得粘滞。

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

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

这是一个工作小提琴：

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

相关问题
最新问题