html - 使用固定标题垂直滚动列列表，但水平滚动列表和标题

Question

jsfiddle:https://jsfiddle.net/jefftg/1chmyppm/

橙色标题列和白名单行一起水平滚动，这是需要的。但是，我希望白名单行垂直滚动，橙色标题固定在顶部。他们目前没有。我希望它能在使用 HTML5/CSS3 的现代浏览器中工作。

CSS

.container {
  width: 800px;
  height: 600px;
  overflow-x: auto;
  overflow-y: hidden;
}

.header-container {
  display: flex;
}

.header-cell {
  height: 40px;
  min-width: 500px;
  background-color: orange;
  border: 1px solid red;
}

.data-container {
  overflow-y: auto;
  overflow-x: hidden;
  display: inline-block;
}

.data-row {
  overflow-x: hidden;
  display: flex;
}

.data-row-cell {
  height: 30px;
  min-width: 500px;
  background-color: white;
  border: 1px solid black;
}

html

<div class="header-container">
  <div class="header-cell">A</div>
  <div class="header-cell">B</div>
  <div class="header-cell">C</div>
  <div class="header-cell">D</div>
</div>

<div class="data-container">
  <div class="data-row">
    <div class="data-row-cell">
      A1
    </div>
    <div class="data-row-cell">
      B1
    </div>
    <div class="data-row-cell">
      C1
    </div>
    <div class="data-row-cell">
      D1
    </div>
  </div>

  ......

</div>

Answer 1

这可以用纯 CSS 完成，不需要 JavaScript。

我已经修改了您的 JSFiddle 以按照您要求的方式工作:https://jsfiddle.net/48386nvn/3/

本质上，.header-container 需要相对于 .container 元素绝对定位:

.container {
  width: 800px;
  height: 600px;
  overflow-x: auto;
  overflow-y: hidden;
  /* added this: */
  position: relative;
}

.header-container {
  display: flex;
  /* added these: */
  position: absolute;
  top: 0;
  left: 0;
}

上述 CSS 会将橙色标题粘贴在您想要的位置，并保持您需要的宽度。

接下来，您需要使数据可滚动，这是通过执行以下计算来完成的:

height: heightOfParentContainer - heightOfHeaderRow;

标题单元格高度为 40px(考虑到边框时为 42px)它还需要一个等于标题行高度的 margin-top:

.data-container {
  overflow-y: auto;
  overflow-x: hidden;
  display: inline-block;
  /* added these: */
  margin-top: 40px;
  height: 560px;
}

这应该确保标题行不与数据容器重叠，并且数据的高度占据整个容器的剩余空间。