Question

我有一个包含一些数据的表，并且我希望标题保持粘性。

该表如下所示：

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;类中删除row，它可以工作，但是表看起来很丑。

类似地，如果我从标题中删除row类，则粘性功能可以正常工作，但是表格看起来也很丑。

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

问题

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

如果可以的话，我想避免使用JavaScript。我正在寻找一种仅使用CSS的方法。

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

说明

我使用的是Chrome版本72。我刚在Firefox中尝试过，但似乎工作正常。我不确定这意味着什么。

Answer 1

您还可以将子选择器用于粘性.header：nth-child（1）.cell

var rsaKeyPub = "BgIAAACkAABSU0ExAAgAAAMAAAC7N02Zb0lf3UO4pl3ymFvkrNSkPP0Q076vYzvbeTqS5vkBcoXloM044q1LCFtaXw6DUzSFM0IqoGOONb+PW+UeNcTcA/+MKNi7nzbBGg3kAj8QhuxO3u2QJXg62Zb9H+SEvZYfi9PhOCSo0LpWKl72k+uaoTyPAuV738TamRvXWb8XOswSmsHQa38q1Id4TW7CzvVOjc0vnhL+rZ8Po1qg5FJc8m8gdGWC0a4NJTzBsOqLzeVE12B8zgIMehu1gGw/SjY5PVEkDABWgY2DzxLT3rbs6oZ5ZLSHu041q3s1ihOQ8+GMRx3qqvPyB4JVlyd7jqN0j0dT+Yqr+8t3/Liu";
var hash = "Ow1kg47GAgf9cyZbisDuTRNy5NQ=";
var signature = "bBnFouYvuZSYZIPihDB4J/CVC7o5ej3MrbkZV9cn6vgL23rDW1jevWEHx4wGBXLc443DKrZ0XQlSpp3FE/+isyDMcGh7c0buMufiYuOQ0rbo8e4tvuZuZpt+06xnBQcYyFMqe4lkFcI0f/NeAIvy1vME+Kq4v3ikwR4+CsjObgEJIBdWB0B4cqp8355pxtYJv2BQ7UHy/Tv0+OtslgbxikrwU2CQ+tR3XHywIdzm0BEOBfdnOlky96ED18BAqwLlxjef0snCl3DvKz93gtIIQVwEoDRlKC/v/Xb4Eke/fyvt66orLEIyL8Emaer9J6P38ZB1pWRuOsLCv4ly8fnOMw==";
RSAParameters rsaParams;
using (var rsa = new RSACryptoServiceProvider())
{
    rsa.ImportCspBlob(Convert.FromBase64String(rsaKeyPub));
    //Export now for easy importing in the next function. This is not the reason the next block returns false.
    rsaParams = rsa.ExportParameters(false);
    Console.WriteLine(rsa.VerifyHash(Convert.FromBase64String(hash), Convert.FromBase64String(signature), HashAlgorithmName.SHA1, RSASignaturePadding.Pkcs1));
}
using (var rsa = new RSACng())
{
    rsa.ImportParameters(rsaParams);
    Console.WriteLine(rsa.VerifyHash(Convert.FromBase64String(hash), Convert.FromBase64String(signature), HashAlgorithmName.SHA1, RSASignaturePadding.Pkcs1));
}

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;
}

Answer 2

您可以通过在标题表单元格div上设置粘滞性来实现。查看此jsfiddle以获得简单的工作示例。

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

css位置：粘滞不适用于显示：table-row-group

2 个答案: