HTML之table表格表头固定，表格内容滚动以及滚动条的样式修改

平时经常会有一些关于表格的样式，借此了解到table标签的简单用法，作以记录。效果如下图示例：
表头固定，内容滚动，滚动条的样式修改

html：
其中 colgroup 标签的用法请参考 点击这里了解colgroup标签

<div style="width: 972px;height: 460px;background-color: rgb(25, 56, 160, 0.5);">
        <div class="table_head">
            <table>
                <colgroup><col span="6" style="width: 100px;"></col></colgroup>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>省份</th>
                        <th>主城市</th>
                        <th>天气</th>
                        <th>湿度</th>
                        <th>空气质量</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table_body">
            <table>
                <colgroup><col span="6" style="width: 100px;"></col></colgroup>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>四川</td>
                        <td>成都</td>
                        <td>阴晴不定</td>
                        <td>80.2%</td>
                        <td>良好</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>四川</td>
                        <td>成都</td>
                        <td>阴晴不定</td>
                        <td>80.2%</td>
                        <td>良好</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>四川</td>
                        <td>成都</td>
                        <td>阴晴不定</td>
                        <td>80.2%</td>
                        <td>良好</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>四川</td>
                        <td>成都</td>
                        <td>阴晴不定</td>
                        <td>80.2%</td>
                        <td>良好</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>四川</td>
                        <td>成都</td>
                        <td>阴晴不定</td>
                        <td>80.2%</td>
                        <td>良好</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>四川</td>
                        <td>成都</td>
                        <td>阴晴不定</td>
                        <td>80.2%</td>
                        <td>良好</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

css：

.table_head table,
        .table_body table {
            width: 972px;
            height: 58px;
            background-color: #254ca0;
            color: white;
            font-size: 22px;
            border-collapse: collapse;/*如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。*/
            border: none;/*去掉边框*/
        }
        .table_head thead tr {
            text-align: center;
            height: 60px;
        }
        .table_body {
            width: 100%;
            height: 400px;
            overflow-y: auto; /*设置纵向滚动*/
        }
        .table_body tbody tr {
            height: 79px;
            text-align: center;
            border-bottom: 1px solid #489ed3;
            cursor: pointer;
        }
        .table_body tbody tr:hover {
            background-color: yellowgreen;
        }
        .table_body::-webkit-scrollbar {/* 是否隐藏滚动条*/
            /* display: none; */
        }
        ::-webkit-scrollbar {/* 定义滚动条样式 */
            width: 15px;
            background-color: red;
        }
        ::-webkit-scrollbar-track {/*定义滚动条轨道 内阴影+圆角*/
            box-shadow: inset 0 0 0px #0905f3;
            border-radius: 5px;
            background-color: yellow;
        }
        ::-webkit-scrollbar-thumb {/*定义滑块 内阴影+圆角*/
            border-radius: 10px;
            box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
            background-color: purple;
        }