Html css位置：粘滞不使用显示：表格行组

我有一个包含一些数据的表，我希望标题是粘性的

该表如下所示：

HTML

<div class='table' id='table'>
  <div class='header row'> <!-- remove row class, it works, but is ugly -->
    <div class='cell'>Col A</div><div class='cell'>Col B</div>
  </div>
  <div class='row'>
    <div class='cell'>x</div><div class='cell'>x</div>
  </div>
</div>

这个表看起来像我想要的样子，但是当我尝试实现StickyHeader特性时，出现了一些问题

如果我删除

显示：表行组从
行
类中，它可以工作，但表看起来很难看

类似地，如果我从标题中删除
行
类，粘滞特性会起作用，但同样，表看起来很难看

这是一把小提琴：

问题

我是否可以继续以我现在的方式在基于div的表中显示数据，并且仍然实现我想要的粘性功能？如果是，怎么做

如果可以，我希望避免使用javascript。我正在寻找一种只使用css的方法

如果可能，我还希望避免使用
表
、
tr
、
td
等元素

澄清

我使用的是Chrome版本72。我刚在Firefox上试用过，似乎效果不错。我不确定这意味着什么。
您也可以使用sticky.header的子选择器：第n个子（1）单元格


var table=document.getElementById（'table'）；
对于（var j=0；j<20；j++）{
var行=document.createElement（'div'）；
row.classList.add（'row'）；
对于（变量i=0；i<2；i++）{
var cell=document.createElement（'div'）；
cell.classList.add（'cell'）；
cell.textContent='abcde'；
子行（单元格）；
}
表2.追加子项（行）；
}
.table{
显示：表格；
字体大小：16px；
}
.行{
显示：表格行组；/*删除此选项，它可以工作，但表格不正常*/
}
.标题：第n个子项（1）.单元格{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
背景色：#fc0；
}
.细胞{
显示：表格单元格；
边框底部：1px纯黑；
右边框：1px纯黑；
填充物：5px；
}
.单元格：第n个孩子（1）{
左边框：1px纯黑；
}
.行：第n个子（1）.单元格{
边框顶部：1件纯黑；
}

科拉科尔B
您可以通过在表头表格单元格div上设置sticky来实现这一点。
查看这个简单的工作示例

.td.header {
  position: sticky;
  top:0px;
}

在Firefox 67中，小提琴似乎对我很管用。哦！我会澄清我的问题。我用的是chrome，这很有趣。这里的诀窍似乎不是让标题本身变粘，而是让标题内的单元格变粘。它只适用于
.header.cell
。它不需要第n个子元素（1）

就可以工作，因为.header只应用于第一行是的，我只是在关注你的css

.td.header {
  position: sticky;
  top:0px;
}