始终在表格的可见区域显示水平滚动

Question

我有一张桌子，希望在水平滚动public function getListItems($id = null) { ---your code---- } 时固定左列。

我找到了一个解决方案here，该解决方案几乎完全涵盖了我根据此jsfiddle所追求的目标

唯一的缺点是要查看水平滚动，您必须垂直滚动到表格底部。有没有一种方法可以使水平滚动立即显示在可见的可滚动区域内？我希望这有道理！？

Answer 1

您可以使用floating-scroll插件。 NPM，Demo

Answer 2

好的，所以我对第一列的单元格使用了position: sticky的技巧，对display: flex使用了tr的技巧。

tr {
  display: flex;
}

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

=> Codepen。