如何使网格 header 行与下方的滚动行对齐？

Question

我使用 bootstrap 的网格布局创建了一个概览，其中一行作为 header。此行应始终位于网格顶部。

问题是出现滚动条时我无法处理。它以某种方式更改布局，使 header 不再与行对齐（参见下面的示例）。

将 header 放入可滚动容器中可以解决布局问题，但会滚动 header。

如何对齐内容和 header 不管滚动条是否可见？

示例： 请注意每一列的对齐方式都有点不一致。

.max-height {
  max-height: 100px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3">
  <div class="row">
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
  </div>
  <div class="row overflow-auto max-height">
    <div class="col">
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这不是一个完美的解决方案，但这样的解决方案怎么样？

我将标题列设置为 sticky-top，并为其设置了背景色。然后将容器设置为overflow-auto.

.max-height {
  max-height: 100px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3 overflow-auto ">
  <div class="row sticky-top bg-white">
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
    <div class="col">
      Some Heading
    </div>
  </div>
  <div class="row max-height">
    <div class="col">
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
      <div class="row">
        <div class="col">
          Some Content
        </div>
        <div class="col">
          Some Content      
        </div>
        <div class="col">
          Some Content   
        </div>
      </div>
    </div>
  </div>
</div>

如何使网格 header 行与下方的滚动行对齐？

How can I keep a grid header row aligned with scrolling rows below?

css

twitter-bootstrap

bootstrap-5