Как сделать Sticky Header из таблицы, когда несколько голов

Question

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

                         <table class="tableclass">
                            <thead class="headclass">
                            <tr class="tr">
                                <th style="color: #ffffff">th content</th>

                                {{#each names}}
                                    <th>{{name}}</th>
                                {{/each}}
                            </tr>
                            </thead>

                            {{#each peoples}}
                                <thead>
                                <tr class="tr-another">
                                    <th  colspan="100%">
                                   <span id="report"><img id="icons" src="button.svg" width="16px" height="16px">
                                   </span> {{this}}</th>
                                </tr>
                                </thead>
                                <tbody class={{this}}>
                                {{>Field}}
                                </tbody>
                            {{/each}}

                        </table>

Я использовал следующий стиль.

tableclass{
    overflow-y: auto;
    height:100px;
    }

.outer table{
    width: 100%;
    table-layout: fixed;
    border : 1px solid black;
    border-spacing: 1px;
}

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}

Может кто-нибудь, пожалуйста, помогите. Я хочу сделать первую теаду липкой.

Спасибо.

Answer 1

Согласно css -tricks.com вы не можете установить position: sticky; на <thead> или <tr>. но вы можете прикрепить <th>. это странно, но работает.

Вы устанавливаете это свойство для класса .outer table th. но я не видел этот класс в вашем HTML!

На самом деле, исходя из вашего HTML кода, вы можете написать это:

.headclass th {
  position: sticky;
  top: 0;
}

Answer 2

Я думаю, что вы css должны быть:

.headclass {
    position: sticky;
    top: 0;
}