table 表头固定，内容滚动时表头与内容不对齐的解决办法

场景：

在vue项目中使用原生table时，添加内容滚动表头固定后发现内容和表头不对齐的情况

解决办法：

<div class="mytable">
								<table border="1" cellspacing="0" style="border-color: #aaaaff;">
									<!--border="1" cellspacing="0"-->
									<thead style="background-color: #8CC5FF;">
										<tr>
											<th  class="text-center">排名</th>
											<th  class="text-center">供应商名称</th>
											<th  class="text-center">订单金额</th>
											<th  class="text-center">配送金额</th>
											<th  class="text-center">配送及时率</th>
											<th  class="text-center">配送准确率</th>
										</tr>
									</thead>
									<tbody >
										<tr v-for="(item, index) in datalist1" :key="index">
											<td style="color: #55aaff;" class="text-center">{{index+1}}</td>
											<td  class="text-center">{{item.code}}</td>
											<td  class="text-center">{{item.name}}</td>
											<td  class="text-center">{{item.total}}</td>
											<td  class="text-center">{{parseFloat(item.mcount)}}</td>
											<td  class="text-center">{{item.mx_tj*100}}</td>
										</tr>
									</tbody>
								</table>
							</div>
							<style>
	.mytable table tbody {
	display:block;
	height:150px;
	overflow-y:scroll;
	}
	
	.mytable table thead, tbody tr {
	display:table;
	width:100%;
	table-layout:fixed;
	}
	.mytable tbody::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 0px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 0px;
		scrollbar-arrow-color: red;
	
	}
	
	.mytable tbody::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #2196f3;
		background: rgba(0, 0, 0, 0.2);
		scrollbar-arrow-color: red;
	}
	
	.mytable tbody::-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); */
		opacity: 0;
		/*完全透明*/
		border-radius: 2px;
	}
</style>