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

Question

是否可以仅用css实现以下布局？鉴于我使用react，如果我需要使用JS也没关系。我只是好奇如果没有的话是否可能。

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

列需要具有可变宽度。

Answer 1

是的。您需要在 css 中添加类似的内容。

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

然后确保您的工具栏元素具有

"fixed-toolbar"

类作为 html/jsx 中的属性。

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

overflow: scroll

。