How can be done fixed header for a scrollable table which has custom column width?

Question

I try to fix the header of a scrollable table which has a custom column width.

When I turn the tbody to block tag, then header columns and body columns do not match each other.

You can see the example from this pen

https://codepen.io/engtuncay/pen/Oqayod

Html Part has a div, in this div, there is a table, I defined column size in the col tags.

    .tableDiv{
      height:150px;
      overflow-y:scroll;
      padding:10px;
    }
    
    .fixed_header{
       width: 100%;
       table-layout: fixed;
    }

    <div class="tableDiv">
    <table class="fixed_header">
      <thead>
        <colgroup>
          <col style="width:70px">
          <col style="width:150px">
          <col>
          <col>
          <col>
        </colgroup>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>row 1-0</td>
          <td>row 1-1</td>
          <td>row 1-2</td>
          <td>row 1-3</td>
          <td>row 1-4</td>
        </tr>
        <tr>
          <td>row 2-0</td>
          <td>row 2-1</td>
          <td>row 2-2</td>
          <td>row 2-3</td>
          <td>row 2-4</td>
        </tr>
        <tr>
          <td>row 3-0</td>
          <td>row 3-1</td>
          <td>row 3-2</td>
          <td>row 3-3</td>
          <td>row 3-4</td>
        </tr>
        <tr>
          <td>row 4-0</td>
          <td>row 4-1</td>
          <td>row 4-2</td>
          <td>row 4-3</td>
          <td>row 4-4</td>
        </tr>
        <tr>
          <td>row 5-0</td>
          <td>row 5-1</td>
          <td>row 5-2</td>
          <td>row 5-3</td>
          <td>row 5-4</td>
        </tr>
        <tr>
          <td>row 6-0</td>
          <td>row 6-1</td>
          <td>row 6-2</td>
          <td>row 6-3</td>
          <td>row 6-4</td>
        </tr>
        <tr>
          <td>row 7-0</td>
          <td>row 7-1</td>
          <td>row 7-2</td>
          <td>row 7-3</td>
          <td>row 7-4</td>
        </tr>
     
      </tbody>
      </table>
    </div>

Thanks

Answer 1

You can set position of the header as fixed.I am writing a sample layout.

<div style="display:flex;justify-content:space-between;">
 <div style="display:inline-block;"><!-- this will contain single column-->
<div style="position:fixed;top:0px;left:0px;">
Col1
</div>