position:sticky in div tables

Question

Is it possible to obtain the position: sticky effect on an HTML table build up using just divs and css?

Apparently if I try to add the position: sticky rule to the header, which already contains the display: table-header-group rule, the sticky effects is null.

HTML

<div class="container">
    <div class="header-row">
        <div class="header>Header</div>
        [...]
    </div>
    <div class="body-row">
        <div class="body>Content</div>
        [...]
    </div>
</div>

CSS

.container {
  display: table;
}

.header-row {
  display: table-header-group;
  position: sticky;
  top: 0;
}

.body-row {
  display: table-row;
}

.body, .header {
  display: table-cell;
}

Live fiddle: https://jsfiddle.net/Lc0rE/9fxobxb0/1/

Answer 1

This question may be a few years old, but I came across the same issue. Especially now that position: sticky is a widely adopted positioning element now.

I got round this by adding a float to the Table header & Table Rows.

.header-row {
  display: table-header-group;
  position: sticky;
  top: 0;
  float: left;
}

.body-row {
  display: table-row;
  float: left;
}

https://jsfiddle.net/58zes8rr/

There may be a cleaner option for this using Flexbox (Arguably not widely supported yet).

Answer 2

I first tried the answer above and added float to my css definition however this blew away all my dynamic column widths and required i specify fixed widths for all columns. Not an option.

As with everyone else, my first instinct was to put sticky on the Row itself but that did not work. It worked PERFECTLY when i added sticky to each cell in the header row.

---

Fiddle Example

---

(TLDR)

ON EACH CELL OF YOUR HEADER ROW:

    .td.searchResultHeader {
        position:sticky;
        top:0;
    }