＜table＞ 固定表头，内容滚动

今天写了个<table>表格，需要要固定表头，没有采用element中的样式，锻炼写了下原生的。

表头和内容分别放在两个<table>中，还是比较方便。用到了<colgroup>元素进行分配表格宽度。代码如下

<table class="table2" cellspacing="0" style="">
    <colgroup>
        <col name="el-table_1_column_13" width="115">
        <col name="el-table_1_column_13" width="115">
        <col name="el-table_1_column_13" width="115">
        <col name="el-table_1_column_13" width="115">
    </colgroup>
    <thead>
    <tr>
        <td class="tit">预警等级</td>
        <td class="lev1">黄色预警</td>
        <td class="lev2">橙色预警</td>
        <td class="lev3">红色预警</td>
    </tr>
    </thead>
</table>
<div style="overflow: auto;max-height:150px;">
    <table class="table3">
        <colgroup>
            <col name="el-table_1_column_13" width="115">
            <col name="el-table_1_column_13" width="115">
            <col name="el-table_1_column_13" width="115">
            <col name="el-table_1_column_13" width="115">
        </colgroup>
        <tr v-for="item in indicator" :key="item.id">
            <td class="tit">
                <div style="text-align: left">
                    <a :href="item.url" target="_blank">{{item.name}}</a>
                </div>
            </td>
            <td v-for="val in item.value" :key="val.id">
                {{val}}
            </td>
        </tr>
    </table>
</div>

<script>
        data() {
            return {
                indicator: [],
            }
        },
</script>

结果下图