3

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.

EvilDr
  • 8,943
  • 14
  • 73
  • 133
  • 2
    `position: sticky` doesn't work on table elements in Firefox as per [this question](https://stackoverflow.com/questions/37071535/position-sticky-firefox-on-a-table-element). – gaynorvader May 25 '17 at 14:57
  • works on div only. https://stackoverflow.com/questions/27521676/position-sticky-not-working-in-firefox – tech2017 May 25 '17 at 14:59
  • @gaynorvader that is to do with table headers, and according to the caniuse link in the question, is a problem with Chrome and Firefox – CalvT May 25 '17 at 14:59
  • not sure if it's an option, but turning the `tr` into a flexbox `row` allows it to sticky https://jsfiddle.net/zfjcb7oc/1/ – Michael Coker May 25 '17 at 15:00
  • @CalvT according to Mozilla's [documentation](https://developer.mozilla.org/en/docs/Web/CSS/position?v=control) relative and sticky positioning on `table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined` – gaynorvader May 25 '17 at 15:05
  • @gaynorvader fair enough, I was going on what caniuse says, which is `Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers` – CalvT May 25 '17 at 15:07

0 Answers0