用于粘性水平滚动表头的最小 CSS（或 JS）解决方案-解网

问：

是否可以仅使用css实现以下布局？鉴于我使用react，因此是否需要使用JS并不重要。我只是好奇没有它是否有可能。

screencap

如果没有，有什么简单的方法可以使表格像这样水平滚动？

列的宽度需要可变。

javascript html reactjs， html-table

@HereticMonkey 如果您想关闭此问题，我可以为链接的问题添加答案。缺少一些信息，例如溢出导致粘性中断，您也不能有一个固定的标题随内容滚动，因为它已从流中删除。这基本上是同一个问题。如果我有时间，我可能会添加一个使用钩子做出反应的解决方案。

答：

0赞 GoodJuJu 11/18/2023 #1

是的。你需要在你的css中添加这样的东西。

.fixed-toolbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: */ (your desired pixel height) */;
}

然后，确保你的工具栏元素在html/jsx中将类作为属性。"fixed-toolbar"

对于水平滚动，您可以有一系列表示每个项目的 div。在每个 div 中，你可以有 2 个元素 - 一个表示项目名称，第二个表示每个项目的所有属性。使项目名称具有固定宽度，并使第二个项目具有动态宽度，但上面有。overflow: scroll

用于粘性水平滚动表头的最小 CSS（或 JS）解决方案