Position sticky on thead - html

Question

As you might know, position: sticky; has landed in Webkit (demo).
So far I can see this only works within the parent element. But I'd like to know if I can use this in a scrolling div with a table.
So it needs to 'listen' on the scrolling event of the div, not the table.
I know I can do this with javascript and absolute positioning, but I was wondering if the sticky-positioning would support this.

Answer 1

Position sticky on thead th works in 2018!
In your stylesheets just add this one line:
thead th { position: sticky; top: 0; }
Your table will need to include thead and th for this to style.
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
// your body code
</tbody>
</table>
Also, if you have multiple rows in thead, you can select the first one to remain sticky:
thead tr:first-child th { position: sticky; top: 0; }
As of March 2018 support is pretty much there across modern browsers
ref: https://caniuse.com/#feat=css-sticky
Credit goes to #ctf0 for this one (ref comment made 3 Dec 2017)

Answer 2

If you need sticky header for chrome only then you can set position: sticky; top: some_value (top property is mandatory) for td element in a thead element.
See:
<table border=1>
<thead>
<tr>
<td style='position: sticky; top: -1px;background: red'>Sticky Column</td>
<td>Simple column</td>
</tr>
</thead>
table with a stiky header

Answer 3

position: sticky doesn't work with table elements (as long as their display attribute starts with table-) since tables are not part of specification:
Other kinds of layout, such as tables, "floating" boxes, ruby annotations, grid layouts, columns and basic handling of normal "flow" content, are described in other modules.
Edit: As Jul 2019 according to https://caniuse.com/#feat=css-sticky Firefox supports this feature and Chrome has at least support for <th> tag.

Answer 4

As it turns out it position: sticky only works in the window and not in a scrolling div.
I created a test-case with a very long table with a table header:
h1 {
font-size: 18px;
font-weight: bold;
margin: 10px 0;
}
div.testTable {
height: 200px;
overflow: auto;
}
table.stickyHead thead {
position: -webkit-sticky;
top: 0px;
background: grey;
}
table.stickyHead td,
table.stickyHead th {
padding: 2px 3px;
}
<h1>Position sticky</h1>
<div class="testTable">
<table class="stickyHead">
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
As you can see, if you remove the overflow from the wrapper and make your window not so tall, the table-head is sticking to the top of the window. I doesn't apply to the wrapping div even if you make give the div position: relative

Answer 5

Caution:
position:sticky doesn't work anymore on Google Chrome in 2019, try to use fixed instead or display:inline-block

Answer 6

Setting the position:sticky for the thead is enough, no need to set it for th :
table.StickyHeader thead {
position: sticky;
top: 0px;
}
Tested in:
Edge 105.0.1343.42 ,
Firefox 105.0 ,
Chrome 105.0.5195.127 ,
Opera 91.0.4516.16
But, Firefox can not render borders of th when position of thead is set to sticky and th has background-color:
table.StickyHeader th {
border: 1px solid black;
padding: 5px;
background-color: gold;
text-align: center;
}
Firefox
Edge, Chrome, Opera