Skip to content

Sticky headers that works (horizontally & vertically) - CSS only

Notifications You must be signed in to change notification settings

webroad/table-sticky-headers

Repository files navigation

table sticky headers

Sticky headers that works (horizontally & vertically) - CSS only

Try demo on https://webroad.pl/demo/table-sticky-headers/

vertical scroll - horizontal sticky header

table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

vertical scroll - horizontal sticky header

horizontal scroll - vertical sticky header

table tbody th[scope=row] {
    position: sticky;
    left: 0;
    z-index: 9;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
}

horizontal scroll - vertical sticky header

Can I use?

Yes.

About

Sticky headers that works (horizontally & vertically) - CSS only

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published