Fixed Table Header with Scrolling Page Body
Initially scrolling, then fixed table header with scrolling page body.
I would like to put a table somewhere in the middle of my web page that has the following behavior:
- Acts like a "normal" html table for the most part... until you scroll past the table's headers
- When you scroll past the table's headers, the table headers stays fixed at or near the top of that page, while the rest of the table keeps scrolling with the rest of the page body. This is not the same as a scrolling
<tbody>with fixed<thead>. - Bonus points if the table headers disappear if you scroll past the last row of the table.
- Bonus points if the table rows disappear as they scroll higher than the headers. (I only need this feature when/if I were to try to place the fixed table header in a different location than at the very top of the page)
It should look something similar to the example given in this fiddle:
http://jsfiddle.net/yeAhU/260/
Except header contents would scroll to the top of the page before becoming fixed and the table contents should not show above the headers as it scrolls.
I have tried slightly tweaking most of the posted answers for "fixed table header scrolling body" questions online but I am not able to get the type of behavior I am looking for from those examples.
I would like the solution to be CSS-based if possible but I am open to other solutions like JS.
I would like the solution to be compatible with both Chrome & Firefox.
QUESTION
Is it possible to do this, and is it possible to do it in just CSS? How?
Answer
In CSS you could use position:sticky; but since Firefox doesn't mix those two so well yet, you still need to use thead and tbody to break the table-layout to use sticky. ... reset the table-layout on tbody and set table-layout to fixed to help hold columns visually together from thead/tbody ... example :
http://jsfiddle.net/yeAhU/261/ i believe it meets points :1,2,3 (what is 4 actually ? )
http://caniuse.com/#search=sticky
chrome removed it a while ago next link might be helpfull
https://www.sitepoint.com/css-position-sticky-introduction-polyfills/
tbody, thead tr {
display: table;
width: 100%;
table-layout: fixed;
}
td {
border:1px solid;
}
* {box-sizing:border-box; border-collapse:collapse;}Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>
<table width="400" border="0" style="display:block;">
<thead style="display:block;position: sticky;top:20px;background-color: grey;">
<tr>
<td width="200">
Name
</td>
<td width="200">
Age
</td>
</tr>
</thead>
<tbody>
<tr>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr></tbody>
</table>
Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>