垂直滚动表标题

Question

有一个问题，我的表头没有正确对齐我的表数据，在实现了这样的垂直滚动条之后：

.tbody{
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

.table{
    width: 100%;
    border-collapse: collapse;
    display: table;
}

.table_header_row{
    display: block;
}

使用倾斜表标题查看网页的示例：

在没有垂直滚动条的情况下它应该如何显示的示例：

无论如何要解决这个问题最好只使用css？

Answer 1

一种简单的方法是将标题设置为绝对位置

CSS

   .yourTableClass {
            position:relative;
            overflow:hidden;
        }
            .yourTableClass thead {
                position:absolute; /*order fixed to freeze the header*/
                top:0px;
                left:0px;
                right:0px;
            }

HTML：

<table class="yourTableClass">
    <thead>
        <tr>
            <td>one</td>
            <td>two</td>
            <td>three</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>