Position sticky broken in Firefox 57

Question

I'm trying to use position sticky to make a sticky table header.

The following jsfiddle works in Chrome v64, but isn't working in Firefox v57.

https://jsfiddle.net/b5fv94m0/

Is there some additional CSS I'm missing to make it work in Firefox?

CSS

.container {
  height: 200px;
  overflow: scroll;
}

th {
  position: sticky;
  top: 0;
}

HTML

<div class="container">
<table>
<thead>
  <tr>
    <th>Header</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</tbody>
</table>
</div>

Answer 1

Most of the browsers are not supporting this position: sticky attribute as mentioned it's an experimental API. Instead of that use position: fixed; for making it sticky.

Check here for browser compatibility.

Answer 2

position:sticky

This css is not compatible to all browser so better use position: fixed