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

Question

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

Визуальный результат

Это мой HTML и CSS для таблицы:
(ПРИМЕЧАНИЕ: я вставляю строки таблицы через JS)

<table class="metadata_table">
<thead class="thead">
    <tr class="tr">
        <th class="th" scope="col">Tag</th>
        <th class="th" scope="col">Creator</th>
        <th class="th" scope="col">Source</th>
        <th class="th" scope="col">Date of creation</th>
    </tr>
</thead>
<tbody class="table-body">
</tbody>

.metadata_table {
    position: absolute;
    bottom: 120px;
    max-height: 105px;
    text-align: left;
    line-height: 35px;
    border-collapse: separate;
    border-spacing: 0;
    display: none;
    float: top;
    width: fit-content;
}

thead tr:first-child {
    background: #39ae3f;
    color: #fff;
    border: none;
}

.th, .td {
    padding: 0 15px 0 20px;
}

.th {
    font-weight: 500;
}

thead .tr:last-child .th {
    border-bottom: 3px solid #ddd;
}

tbody .tr:hover {
    background-color: #f2f2f2;
    cursor: default;
}

tbody .td {
    border-bottom: 1px solid #ddd;
}

.table-body {
    display: block;
    overflow-y: scroll;
    height: 105px;
    overflow-x: hidden;
}

.td:last-child {
    text-align: right;
    padding-right: 10px;
}

Answer 1

Вам нужно будет установить статическую ширину, возможно, в EM, или использовать JavaScript для установки ширины:

function setHeaderCellWidths() {
    var aSlice=Array.prototype.slice;
    aSlice.call(document.querySelectorAll('.metadata_table')).forEach(function(table){
        var tds=table.querySelectorAll('tbody:first-of-type tr:first-child>*');
        aSlice.call(table.querySelectorAll('thead th')).forEach(function(cell,idx){
            cell.style.width=window.getComputedStyle(tds[idx],null).width;
        });
    });
}
window.addEventListener('load',setHeaderCellWidths,null);
window.addEventListener('resize',function(){
    clearTimeout(setHeaderCellWidths.timer);
    setHeaderCellWidths.timer=setTimeout(setHeaderCellWidths,250);
},null);