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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >
      Some Heading
    </div>
    <div >
      Some Heading
    </div>
    <div >
      Some Heading
    </div>
  </div>
  <div >
    <div >
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >
      Some Heading
    </div>
    <div >
      Some Heading
    </div>
    <div >
      Some Heading
    </div>
  </div>
  <div >
    <div >
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
      <div >
        <div >
          Some Content
        </div>
        <div >
          Some Content      
        </div>
        <div >
          Some Content   
        </div>
      </div>
    </div>
  </div>
</div>