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

【问题标题】：Always show horizontal scroll in visible area of table始终在表格的可见区域显示水平滚动
【发布时间】：2018-06-27 18:43:06
【问题描述】：

我有一个表格，我希望在水平滚动only 时固定左侧列。

我找到了一个解决方案here，它几乎完全涵盖了我所追求的jsfiddle

唯一的缺点是要查看水平滚动，您必须垂直滚动到表格底部。有没有办法让水平滚动立即出现在可见的可滚动区域内？我希望这有某种意义！？

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

您不需要任何插件。 Pure CSS solution is possible.
@AndrzejZiółek 你的 CSS 解决方案很棒，但有一个警告。如果视口高度小于表格，除非您滚动到此滚动条，否则您将看不到底部滚动条。因此，mindparse 应该根据自己的需要选择合适的解决方案。
_ 如果视口高度小于表格，您将看不到底部滚动条_ -- 如果您正确设置高度，您会看到。取决于开发者的需求。

【解决方案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;
}

【讨论】：