css position: sticky не работает с display: table-row-group

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

Answer 2

Этого можно добиться, установив закрепление в заголовке ячейки таблицы div. Проверьте это jsfiddle для простого рабочего примера.

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