Question: I have a table with some data, and I want the header to be sticky.

The table looks like this:

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

```

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

```

The table looks how I want it to look, but when I try to implement the sticky header feature, there are some problems.

If I remove `display: table-row-group;` from the `row` class, it works, but the table looks ugly.

Similarly, if I remove the `row` class from the header, the sticky feature works but, again, the table looks ugly.

Here is a fiddle: <https://jsfiddle.net/mexw58yp/4/>

**Question**

Is it possible for me to continue to display my data in a div-based table the way I am, and still implement the sticky functionality I want? And if so, how?

I would like to avoid using javascript if I can. I'm looking for a way using only css.

I would also, if possible, like to avoid using the `table`, `tr`, `td` etc elements.

**Clarification**

I am using Chrome version 72. I just tried in Firefox and it seems to work fine. I'm not sure what the implications of this are.

Answer: 
you can also use the child selector for sticky .header:nth-child(1) .cell 

```js
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);
}
```

```css
.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;
}
```

```html
<div class='table' id='table'>
  <div class='header row'>
    <div class='cell'>Col A</div><div class='cell'>Col B</div>
  </div>
</div>
```
You achieve this by setting sticky on the header table-cell div.
Check out this [jsfiddle](https://jsfiddle.net/4mfsptLv/) for simple working example.

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

```