在 vue-cli 项目中渲染表格使 thead 固定, tbody出现滚动条并优化

0\ 效果展示

1\ 问题分析

• 当数据较多时，页面整体会因为高度超出，出现浏览器默认的滚动条，表头随之滚动，不便于查看。
• 使表头固定，不让浏览器出现滚动条，只在表体数据出现滚动条，而默认滚动条样式太丑，需要优化。

2\ 解决方案

首先构建页面基础布局，实现基本功能
然后进行页面优化

表头固定

此处所用的代码都是根据上图的页面设计来的，不必拘泥于此，可以根据实际情况调整。
主要目的是实现表头固定和滚动条优化

<!-- 列表展示 -->
<template>
	<div class="table-wrapper">
	  <div class="table-head">
	    <table>
	      <colgroup>
	        <col style="width:70px" />
	        <col />
	        <col />
	        <col />
	        <col />
	        <col />
	        <col />
	        <col />
	      </colgroup>
	      <thead>
	        <tr>
	          <td>序号</td>
	          <td>时间</td>
	          <td>货1</td>
	          <td>货2</td>
	          <td>货3</td