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

Question

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

我找到了一个解决方案这里，几乎完全符合我的需求，就像这个jsfiddle一样。

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

- mindparse

Answer 1

你可以使用floating-scroll插件。请参考GitHub和NPM获取更多信息，也可以查看演示。

- piotros

---

你不需要任何插件。[可以使用纯CSS解决方案] (https://dev59.com/Dqzka4cB1Zd3GeqP83jG#51059606)。 - Andrzej Ziółek

@AndrzejZiółek，您的CSS解决方案非常好，但有一个注意事项。如果视口高度小于表格，则除非您滚动到此滚动条，否则您将看不到底部滚动条。因此，Mindparse应根据自己的需求选择适当的解决方案。 - piotros

如果视口的高度小于表格的高度，你将看不到底部的滚动条 - 如果你正确设置了高度，你就会看到。这取决于开发者的需求。 - Andrzej Ziółek

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;
}

"Translate the following from English to Chinese. The content is related to programming and includes HTML tags. Please do not provide explanations:

=> Codepen.

"

Translated into Chinese: "

=> Codepen.

" 意思是等于符号加链接到 Codepen 的 HTML 标签。

- Andrzej Ziółek

---

这不起作用，因为单元格的第一列需要是粘性的。 - mindparse

这实际上会破坏它，并导致第一列滚动，而问题是如何防止滚动。 - Leo K

我有一个想法。你能改变HTML结构，还是只能用CSS？ - Andrzej Ziółek

我对任何建议都持开放态度！是的，我可以轻松修改HTML。 - mindparse

我已经更新了我的Codepen（https://codepen.io/ajzk/pen/wXYeMG）。你能否现在检查一下并告诉我是否对你来说没问题？ - Andrzej Ziółek