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>
Most of the browsers are not supporting this
position: sticky
attribute as mentioned it's an experimental API. Instead of that useposition: fixed;
for making itsticky
.Check here for browser compatibility.