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

2023年6月30日 660次阅读

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

该表如下所示：

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, it works, 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>
点赞