Как сделать фиксированный заголовок для прокручиваемой таблицы, которая имеет настраиваемую ширину столбца?

Question

Я пытаюсь исправить заголовок прокручиваемой таблицы с настраиваемой шириной столбца.

Когда я поворачиваю tbody в тег tag, столбцы заголовка и столбцы тела не совпадают друг с другом.

Вы можете увидеть пример из этой ручки

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

Html Part имеет div, в этом div есть таблица, я определил размер столбца в тегах col.

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

Спасибо

Answer 1

Вы можете установить положение заголовка как фиксированное. Я пишу пример макета.

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