css - 如何在 div 的帮助下在表格中制作固定标题？

Question

HTML：

<thead>
<tr>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
</tr>
<div class="header">
    <tr>
        <th><div style="width:36px"><textarea class="cell">Name 1</textarea></div></th>
        <th><div style="width:36px"><textarea class="cell">Name 2</textarea></div></th>
    </tr>
</div>
</thead>

CSS：

div.header {
    position: absolute;
}

JS：

$(window).scroll(function() {
    $('div.header').css({
        'top': $(this).scrollTop()
    });
});

我想保留第一个假标题行以将列宽应​​用于表格并在滚动时移动其他行，但它们不会移动。我需要改变什么？

Answer 1

你可以给你一个固定的高度和溢出：自动，而不是使用 div。这将允许表格的主体滚动

Answer 2

演示

这种解决方案可能吗？

<thead>
<tr>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
</tr>
<div class="header">
    <tr>
        <th><div class="horizontal"><textarea class="cell">Name 1</textarea></div></th>
        <th><div class="horizontal"><textarea class="cell">Name 2</textarea></div></th>
    </tr>
</div>
</thead>

CSS

.horizontal {
display:inline-block;
margin-right:20px;
width:150px;
}
.header{
height:35px;
width:165px;
overflow-x:scroll;
overflow-y:scroll;
}