Issue
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.
Solution
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)
Answered By - Evolve
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.