原生table表头固定，内容滚动

HTML：

<div style="width: 1200px;margin: 0 auto;">
        <div class="table-head">
            <table>
                <colgroup>
                    <col style="width: 100px;" />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th style=" width:140px">单元1</th>
                        <th style=" width:330px">单元2</th>
                        <th style=" width:250px">单元3</th>
                        <th style=" width:155px">单元4</th>
                        <th style=" width:155px">单元5</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-body">
            <table>
                <colgroup>
                    <col style="width: 100px;" />
                    <col />
                </colgroup>
                <tbody>
                    <tr>
                        <td style=" width:140px">测试1</td>
                        <td style=" width:330px">测试1</td>
                        <td style=" width:250px">测试1</td>
                        <td style=" width:155px">测试1</td>
                        <td style=" width:155px">测试1</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

css：

.table-head {
            padding-right: 4px;
            background-color: #e7e7e7;
            color: #000;
        }

        .table-body {
            width: 100%;
            height: 300px;
            overflow-y: scroll;
            border-bottom: 1px solid #c0bebe;
        }

        .table-head table,
        .table-body table {
            width: 100%;
            border-collapse: collapse;
            padding-right: 10px;
        }

        table tr,
        th,
        td {
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #c0bebe;
            color: #808080;
        }
        th{color: #686868;}
        .table-body::-webkit-scrollbar {
            width: 4px;
            /*height: 4px;*/
        }

        .table-body::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
        }

        .table-body::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }