Html 具有两个标题行的粘性表标题

考虑到下表结构：

项目编号
商店ABC
存储DEF
篮子
客户
篮子
客户

我希望使表格标题具有粘性，以便在向下滚动表格时，它仍然可见

当只有一个标题行时，这很简单。然而，如果有两个，事情会变得棘手。我提出了以下css：

thead-th，thead-td{
位置：粘性；
排名：0；
背景：#eee；
}

它“几乎”起作用，除了滚动表格时，两个标题行“滑动”到相同的位置，第二行位于第一行的顶部

如何使两个标题行具有粘性，以便在向下滚动表格时不会改变其外观（即，整个标题仍然是一个“块”，其两个不同的行保持不变）

强制性JSIDLE：

---更新

分别用

class=“first”

和

class=“second”

标识两个标题行，并添加以下css：

thead tr.first th，thead tr.first td{
位置：粘性；
排名：0；
背景：#eee；
}
thead tr.second th，thead tr.second td{
位置：粘性；
顶部：17px；
背景：#eee；
}

具有在滚动表格时保持标题行在一起的效果。但是，

top:17px

元素在很大程度上取决于行的实际渲染大小。例如，如果用户的浏览器以不同的方式呈现文本大小，则所有内容都将关闭

另外，这种方法的缺点是以一种非常奇怪的方式去除了标题边框

如何确保在滚动表格时：

第二行的

top:xxx

规则实际上反映了第一行的实际高度

边框是否与不滚动表格时的外观保持一致

---

请参阅更新的JSFIDLE:

您可以从中删除“top”（顶部）和“THAD tr.second th”，THAD tr.second td 并添加一个jquery，用于获取和设置第二个标题的高度

$（文档）.ready（函数（）{
var firstheight=$（'.first'）.height（）；
$（“thead tr.second th，thead tr.second td”）.css（“top”，firstheight）
});
表格{
身高：100%；
边界塌陷：塌陷；
宽度：100%；
利润率：10px；
字号：0.8em；
}
泰阿德第一时间，泰阿德第一时间{
位置：粘性；
职位：-webkit sticky；/*Safari*/
排名：0；
背景：#eee；
}
thead tr.second th，thead tr.second td{
位置：粘性；
职位：-webkit sticky；/*Safari*/
背景：#eee；
}

项目编号
商店ABC
存储DEF
篮子
客户
篮子
客户
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
123
345
345
345
345
很有趣。尽管jQuery在这里绝对不是一个选项（试图保持干净），但这种方法确实有意义，并且完全适用于香草JavaScript。您的tr.first和tr.second方法挽救了这一天。谢谢在大多数情况下，接受某些标题单元格的固定高度是完全可行的，这种类型的解决方案就像一个符咒，不需要总JS