I have a table that is supposed to scroll both vertically and horizontally but with two twists. The header/footer must be fixated to the top/bottom and the left set of columns must be fixated to the left edge.

I used display:sticky, which worked as expected until I activated overflow-x:scroll on the right side of the table. Apparently, those two styles collide and produce an undesired result. It’s been resolved by wrapping the inner markup in a section that is scrollable vertically. Unfortunately, that eliminates the horizontal scroll restricted to the right set of columns. Now, the entire table scrolls horizontally (including the left side columns supposed to be fixated).

Here’s a fiddle illustrating the “unfortunately” resolved issue.

How can I approach it the best way?

In order to resolve the last, unfortunate part, a colleague suggest to put a copy of the left side columns on top of my table and let the entire original content scroll horizontally behind it, creating the illusion of sticky content.

This, however, introduces the issue of the header/footer of the overlay not being sticky on vertical scroll and we’re back to square 0. In the fiddle, it can be shown by changing the style display to flex instead of none and the component is ID’ed fixy.

#fixy {
  display: none;
  border-color: fuchsia;
  position: sticky;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 10;
}

#fixy .cell {
  background-color: teal;
  color: white;
  font-weight: bold;
}