html – css位置：粘不使用display：table-row-group

概述我有一个包含一些数据的表,我希望标题是粘性的. 该表如下所示： 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 我有一个包含一些数据的表,我希望标题是粘性的.

该表如下所示：

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>

最小的CSS

.table {  display: table;}.row {  display: table-row-group; /* remove this,but is ugly */}.header {  position: -webkit-sticky;  position: sticky;  top: 0;}.cell {  display: table-cell;}

该表看起来我希望它看起来如何,但是当我尝试实现粘性标题功能时,存在一些问题.

如果我删除display：table-row-group;从行类,它的工作原理,但表看起来很难看.

类似地,如果我从标题中删除行类,粘性功能可以工作,但同样,表看起来很难看.

这是一个小提琴：https://jsfiddle.net/mexw58yp/4/

题

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

如果可以,我想避免使用JavaScript.我正在寻找一种只使用CSS的方法.

如果可能的话,我也想避免使用table,tr,td等元素.

澄清

我使用的是Chrome版本72.我刚尝试使用firefox,它似乎运行正常.我不确定这是什么意思.

解决方法 你也可以使用子选择器来粘贴.header：nth-​​child(1).cell

var table = document.getElementByID('table');for (var j = 0; j < 20; j++) {	var row = document.createElement('div');  row.classList.add('row');	for (var i = 0; i < 2; i++) {  	var cell = document.createElement('div');  	cell.classList.add('cell');    cell.textContent = 'abcde';  	row.appendChild(cell);  }   table.appendChild(row);}

.table {	display: table;	Font-size: 16px;}.row {	display: table-row-group; /* removing this,it works but table off kilter  */}.header:nth-child(1) .cell {  position: -webkit-sticky;  position: sticky;  top: 0;  background-color: #fc0;}.cell {	display: table-cell;	border-bottom: 1px solID black;	border-right: 1px solID black;  padding: 5px;}.cell:nth-child(1) {	border-left: 1px solID black;}.row:nth-child(1) .cell {	border-top: 1px solID black;}

<div class='table' ID='table'>  <div class='header row'>    <div class='cell'>Col A</div><div class='cell'>Col B</div>  </div></div>

总结

以上是内存溢出为你收集整理的html – css位置：粘不使用display：table-row-group全部内容，希望文章能够帮你解决html – css位置：粘不使用display：table-row-group所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。