6

I have a table where I would like the left hand column to be fixed when scrolling horizontally only.

I found a solution here which covers almost exactly what I am after as per this jsfiddle

The only downside is that to see the horizontal scroll you have to vertically scroll to the bottom of the table. Is there a way to get the horizontal scroll to appear immediately inside the visible scrollable area? I hope that makes some sort of sense!?

mindparse
  • 6,115
  • 27
  • 90
  • 191

2 Answers2

3

You can use floating-scroll plugin. NPM, Demo

piotros
  • 585
  • 5
  • 9
  • You don't need any plugins. [Pure CSS solution is possible](https://stackoverflow.com/questions/51059423/always-show-horizontal-scroll-in-visible-area-of-table/51059606#51059606). – Andrzej Ziółek Jun 27 '18 at 11:47
  • @AndrzejZiółek your CSS solution is great but there is one caveat. If the viewport height is smaller than table you will not see the bottom scrollbar unless you scroll to this scrollbar. Therefore, mindparse should choose proper solution depending on his needs. – piotros Jun 27 '18 at 12:17
  • _ If the viewport height is smaller than table you will not see the bottom scrollbar_ -- you will, if you set height properly. Depends on developer's needs. – Andrzej Ziółek Jun 27 '18 at 12:28
2

Okay, so I used trick with position: sticky for first column's cells combined with display: flex with for tr.

tr {
  display: flex;
}

tr > td:first-of-type {
  position: sticky;
  left: 0;
  top: 0;
  display: inline-block;
  background: red;
}

=> Codepen.

Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21