通常我们在制作一个可以滚动的表格时，都希望表头能够固定。但table标签并不能实现这个功能，所以我们可以用两个table来实现。
代码如下

<div class="table">
    <div class="table-head">
        <table>
            <colgroup>
                <col class="trow-1"/>
                <col class="trow-1"/>
                <col class="trow-1"/>
            </colgroup>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>balance</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="table-body">
        <table>
            <colgroup>
                <col class="trow-1"/>
                <col class="trow-1"/>
                <col class="trow-1"/>
            </colgroup>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Alice</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Alex</td>
                    <td>50</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

样式如下

.trow-1{
    width: 50px;
}
.trow-2{
    width: 100px;
}
.trow-3{
    width: 100px;
}
.table-body {
    height: 300px;
    overflow-y: scroll;
}

一个table作为表头，一个table作为表的内容，两个表格通过colgroup实现对齐，再给作为body的table外的div固定高度并加上overflow-y属性即可实现滚动。