uniapp手动画table，并固定表头，支持横向纵向滑动

在template里面（示例）

<view class="table-main">
		<table class="gridtable">
			<thead>
				<tr class="title">
					<td class="title-th" style="width: 100upx;height: 50upx;">编号</td>
					<td class="title-th" style="width: 200upx;height: 50upx">用户名</td>
					<td class="title-th" style="width: 200upx;height: 50upx">手机号</td>
					<td class="title-th" style="width: 200upx;height: 50upx">店号</td>
					<td class="title-th" style="width: 200upx;height: 50upx">店名</td>
					<td class="title-th" style="width: 300upx;height: 50upx">参加日期</td>
					<td class="title-th" style="width: 200upx;height: 50upx">打卡状态</td>
					<td class="title-th" style="width: 200upx;height: 50upx">核销状态</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in info">
					<td class="body-td" style="width: 100upx;height:30upx">{{index+1}}</td>
					<td class="body-td" style="width: 200upx;height:30upx">{{item.userName}}</td>
					<td class="body-td" style="width: 200upx;height:30upx">{{item.userMobile}}</td>
					<td class="body-td" style="width: 200upx;height:30upx">{{item.shopCode}}</td>
					<td class="body-td" style="width: 200upx;height:30upx">{{item.shopName}}</td>
					<td class="body-td" style="width: 300upx;height:30upx">{{item.joinTime}}</td>
					<td class="body-td" style="width: 200upx;height:30upx">{{item.flagOne ? '已打卡':'未打卡'}}</td>
					<td class="body-td" style="width: 200upx;height:30upx">{{item.isWrite ? '已核销':'未核销'}}</td>
				</tr>
			</tbody>
		</table>
	</view>

2.style里面

.table-main {
		overflow: auto;
	}
	table.gridtable {
		width: auto;
		height: auto;
	    font-family: verdana,arial,sans-serif;
	    font-size:11px;
	    color:#333333;
	    border-width: 1px;
	    border-color: #666666;
	    border-collapse: collapse;
	}
	table.gridtable thead, tbody tr {
		display: flex;
	}
	.title-th {
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}
	.body-td {
		flex-shrink: 0;
		height: 50upx;
		display: flex;
	}
	table.gridtable tbody{
		display: block;
		height: 95vh;
		overflow: auto;
	}
	table.gridtable th {
	    padding: 8px;
	    background-color: #dedede;
		white-space: nowrap;
		border: 1px solid #000;
	} 

	table.gridtable td {
		height: 3.66upx;
		white-space: nowrap;
	    padding: 5.33upx;
		padding-right: 16.66upx;
		border-bottom: 1px solid #666;
		border-left: 1px solid #666;
	    background-color: #ffffff;
	}