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

user_15422118 0
Viewed 267

I used the Grid layout of bootstrap to create an overview in which one row serves as a header. This row should stick to the top of the grid at all times.

The problem is that I can not handle when the scrollbar appears. It changes the layout in a a way so that the header is not aligned with the rows anymore (See the example below).

Putting the header in the scrollable container fixes the layout issue, but will scroll the header away.

How do I align the content and the header not matter if the scrollbar is visible or not?

Example: Notice how each column is a little less aligned.

.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>

bootstrap-5 twitter-bootstrap css
1 Answers

It's not a perfect solution but how about something like this?

I set the heading column as sticky-top, and gave it a background colour. Then set the container to 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>

user_33607210
Related