Заставить td к той же ширине, что и в таблице с фиксированным заголовком

Question

у меня есть стол Содержимое таблицы может меняться динамически. Пользователь может добавлять или удалять строки и столбцы.

и автоматически изменяет размер для соответствия данным.

Вот как я хочу, чтобы это выглядело.

Но теперь я добавил фиксированный заголовок на y-scroll, и теперь он не соответствует заголовку. И я не могу установить столбцы фиксированного размера, потому что содержимое может измениться

Мой HTML:

<div class="table-responsive tableFixedHead">
   <table class="w-100">
     <thead>
       <tr>
          <th style="width:5%">#</th>
          <th style="width:60%">Fråga</th>
          <th style="width:5%">Type</th>
       </tr>
     </thead>
     <tbody>
           <tr>
               <td>32</td>
               <td>text</td>
               <td>text</td>
          </tr>
     </tbody>  
 </table>
</div>

Мой css:

.tableFixedHead table {
width: 100%;
table-layout: fixed;
}

/*
.tableFixedHead {
    width: auto;
}
*/
.tableFixedHead thead {
   background: white;
   display: table;
   width: 100%;
}

.tableFixedHead tbody {
  height: 100px;
   overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
}

.tableFixedHead tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}

Я пробовал разные комбинации компоновки стола, и гайка дисплея не может понять это правильно.