CSS position:sticky for left-most table column on horizontal scrolling

Viewed 3005

This must have been asked before, but I can't find it...

Ignoring browser compatibility, and focusing on a CSS-only solution (which discounts everything else I've read today), is it possible to use position:sticky to lock the first column of a table when the screen is scroll horizontally?

i.e. the left-most column scrolls along with the left-edge of the viewport on a horizontal scroll.

From research, I figured something like this would suffice:

tr > td:first-of-type,
tr > th:first-of-type {
   position: sticky;
   left: 5px;
}

In my JSFiddle though, it only works in Chrome. Firefox however is supposed to support sticky, so perhaps I've made a code mistake...?

I can implement vertical stickyness, no problem, but not horizontal.

0 Answers
Related