带有 Firefox/IE 的粘性表头 [英] Sticky table headers with firefox / IE

问题描述

我正在使用带有 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);}别的{$('.row_header').offset({ top: $('.table').offset().top});$('.row_header').css('position','static');//console.log('satic');}});

.wrapper{填充:10px；显示:弹性；对齐内容:中心；对齐项目:居中；}.桌子{显示:表；边距:0 0 40px 0；最大宽度:100%；}.排 {显示:表格行；}.细胞 {显示:表格单元格；边框:1px纯黑色；填充:2px；}.row_header {显示:表格行；背景:#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>滚动查看问题...</b><div class="wrapper"><div class="table"><div class="row_header"><div class="cell">名称</div><div class="cell">年龄</div><div class="cell">站点</div>

<div class="row"><div class="cell">David</div><div class="cell">33</div><div class="cell">堆栈溢出</div>

<div class="row"><div class="cell">David</div><div class="cell">33</div><div class="cell">堆栈溢出</div>

<div class="row"><div class="cell">David</div><div class="cell">33</div><div class="cell">堆栈溢出</div>

<div class="row"><div class="cell">David</div><div class="cell">33</div><div class="cell">堆栈溢出</div>

<div class="row"><div class="cell">David</div><div class="cell">33</div><div class="cell">堆栈溢出</div>

<div class="row"><div class="cell">David</div><div class="cell">33</div><div class="cell">堆栈溢出</div>