css 固定表格左侧头部 右侧可滑动

css 固定表格左侧头部 右侧可滑动
效果展示

<div class="table-wrapper">
				<table class="fl-table">
					<thead>
						<tr>
							<th>序</th>
							<th>用户名</th>
							<th>部门名 </th>
							<th>年月份</th>
							<th>本月剩余调休时长</th>
							<th>本月已调休时长</th>
							<th>本月共可调休时长</th>
							<th>到期调休时间</th>
						</tr>
					</thead>
					<tbody class="tabcontainer">
						<tr>
				<td>{{index}}</td>
				<td>{{displayname}}</td>
				<td>{{ouname}}</td>
				<td>{{month}}</td>
				<td>{{txttimeleft}}</td>
				<td>{{use}}</td>
				<td>{{txtotal}}</td>
				<td>{{endtime}}</td>
			</tr>
			<tr>
				<td>{{index}}</td>
				<td>{{displayname}}</td>
				<td>{{ouname}}</td>
				<td>{{month}}</td>
				<td>{{txttimeleft}}</td>
				<td>{{use}}</td>
				<td>{{txtotal}}</td>
				<td>{{endtime}}</td>
			</tr>
			<tr>
				<td>{{index}}</td>
				<td>{{displayname}}</td>
				<td>{{ouname}}</td>
				<td>{{month}}</td>
				<td>{{txttimeleft}}</td>
				<td>{{use}}</td>
				<td>{{txtotal}}</td>
				<td>{{endtime}}</td>
			</tr>
						
						</tbody><tbody>
				</tbody></table>
			</div>

css部分

/* Table Styles */
			
			.table-wrapper {
				margin: 0;
				box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2);
			}
			
			.fl-table {
				border-radius: 5px;
				font-size: 12px;
				font-weight: normal;
				border: none;
				border-collapse: collapse;
				width: 100%;
				max-width: 100%;
				white-space: nowrap;
				background-color: white;
			}
			
			.fl-table td,
			.fl-table th {
				text-align: center;
				padding: 8px;
			}
			
			.fl-table td {
				border-right: 1px solid #f8f8f8;
				font-size: 12px;
			}
			
			.fl-table thead th {
				color: #ffffff;
				background: #4FC3A1;
			}
			
			.fl-table thead th:nth-child(odd) {
				color: #ffffff;
				background: #324960;
			}
			
			.fl-table tr:nth-child(even) {
				background: #F8F8F8;
			}
			/* Responsive */
			/*@media (max-width: 767px) {*/
			
			.fl-table {
				display: block;
				width: 100%;
			}
			
			.table-wrapper:before {
				content: "";
				display: block;
				text-align: right;
				font-size: 11px;
				color: white;
				padding: 0;
			}
			
			.fl-table thead,
			.fl-table tbody,
			.fl-table thead th {
				display: block;
			}
			
			.fl-table thead th:last-child {
				border-bottom: none;
			}
			
			.fl-table thead {
				float: left;
			}
			
			.fl-table tbody {
				width: auto;
				position: relative;
				overflow-x: auto;
			}
			
			.fl-table td,
			.fl-table th {
				padding: 20px .625em .625em .625em;
				height: 60px;
				vertical-align: middle;
				box-sizing: border-box;
				overflow-x: hidden;
				overflow-y: auto;
				
				font-size: 13px;
				
			}
			.fl-table th{
				width: 116px;
			}
			.fl-table thead th {
				text-align: left;
				border-bottom: 1px solid #f7f7f9;
			}
			
			.fl-table tbody tr {
				display: table-cell;
			}
			
			.fl-table tbody tr:nth-child(odd) {
				background: none;
			}
			
			.fl-table tr:nth-child(even) {
				background: transparent;
			}
			
			.fl-table tr td:nth-child(odd) {
				background: #F8F8F8;
				border-right: 1px solid #E6E4E4;
			}
			
			.fl-table tr td:nth-child(even) {
				border-right: 1px solid #E6E4E4;
			}
			
			.fl-table tbody td {
				display: block;
				text-align: center;
			}