uniapp 固定首行和固定列的表格

准备

在uniapp应用中新建一个页面；
css部分用到了sass，开发工具是HbuilderX的话安装sass插件即可。

效果

第一个一个表格是默认样式用作对照，第二个表格是固定了末尾两列和首行的自定义样式表格。
效果截图

代码

<template>
    <view>
		<view class="table-box">
			<table cellspacing="0px" cellpadding="0px">
				<thead>
					<tr class="table-new-line" >
						<th>第一项</th>
						<th>第二项</th>
						<th>第三项</th>
						<th>第四项</th>
						<th>第五项</th>
						<th>第六项</th>
						<th class="hold2 zd">
							固定2
						</th>
						<th class="hold1 zd">
							固定1
						</th>
					</tr>
				</thead>
				<tbody>
					<tr class="table-new-line" v-for="(item, index) in 10" :key="index">		
						<td>第一项</td>
						<td>第二项
							<checkbox style="transform:scale(0.8)" :checked="true" />
						</td>
						<td>第三项</td>
						<td>第四项</td>
						<td>第五项</td>
						<td>第六项</td>
						<td class="hold2">
							<checkbox style="transform:scale(0.8)" :checked="true" />
						</td>
						<td class="hold1">
							<button class="table-button">
								按钮
							</button>
						</td>
					</tr>
				</tbody>
			</table>
		</view>
		<view class="table-box">
			<table id="CustomTable" ref="CustomTable" cellspacing="0px" cellpadding="0px">
				<thead>
					<tr class="table-new-line" >
						<th>第一项</th>
						<th>第二项</th>
						<th>第三项</th>
						<th>第四项</th>
						<th>第五项</th>
						<th>第六项</th>				
						<th class="hold2 zd">
							固定2
						</th>
						<th class="hold1 zd">
							固定1
						</th>
					</tr>
				</thead>
				<tbody>
					<tr class="table-new-line" v-for="(item, index) in 10" :key="index">						
						<td>第一项</td>
						<td>第二项
							<checkbox style="transform:scale(0.8)" :checked="true" />
						</td>
						<td>第三项</td>
						<td>第四项</td>
						<td>第五项</td>
						<td>第六项</td>
						<td class="hold2">
							<checkbox style="transform:scale(0.8)" :checked="true" />
						</td>
						<td class="hold1">
							<button class="table-button">
								按钮
							</button>
						</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>
 
<script>
export default {
    
    
    data() {
    
    
        return {
    
    
			
        };
    },
	onReady() {
    
    
		this.altRows('CustomTable');
	},
	methods:{
    
    
		altRows(id){
    
    
			// #ifdef H5
			// 表格行变色，在不能使用document的情况下不适用这个方法
			if(document.getElementsByTagName){
    
    
				var table = document.getElementById(id); 
				var rows = table.getElementsByTagName("tr");
				// debugger
				for(let i = 0; i < rows.length; i++){
    
             
					if(i % 2 == 0){
    
    
						rows[i].className += " evenrowcolor";
					}else{
    
    
						rows[i].className += " oddrowcolor";
					}    
				}
			}
			// #endif
			// #ifdef APP-PLUS
			
			// #endif
		},
		
	}
};
</script>

<style scoped lang="scss">
		.table-box{
    
    
			margin: auto;
            width: 98vw;
            overflow:auto;
            height:35vh;  /* 设置固定高度 */
        }
        table#CustomTable {
    
    
			/* 去除间隔 */
			border-collapse:collapse;
			/* 打开间隔 */
			/* border-collapse : separate; */
			border:0.5px solid white;
            table-layout: fixed;
			text-align:center;
			font-size: 28rpx;
			/* 固定宽度 */
            width: 180rpx;
			height:45rpx;
			thead tr th{
    
    
			     position:sticky;
			     top:0; /* 首行固定在头部  */
			 };
			td, th {
    
    
			    /* 设置td,th宽度高度 */
				border:0.5px solid white;
				/* background-color: #ffffff; */
				width: 180rpx;
			    height:45rpx;
			};
			th:not(.is-hidden):last-child, td:not(.is-hidden):last-child{
    
    
			    right:-1px;};
			th {
    
    
				z-index: 1;
			    background-color:#ecf5ff;
			}
			th:nth-last-child(1), td:nth-last-child(1){
    
    
				position:sticky;
				right:0;
				z-index:2;
				width: 180rpx;
				background-color: #c7e2d5; 
			}
			th:nth-last-child(2), td:nth-last-child(2){
    
    
				position:sticky;
				right:180rpx;
				z-index:2;
				width: 100rpx;
				background-color: #c7e2d5; 
			}
			th.zd{
    
    
				 z-index:3;
			}
        }

		.first-item{
    
    	
			display: flex;
			justify-content: center;
			/* width: 28%; */
		}
		.second-item{
    
    
			display: flex;
			justify-content: center;
			width: 80%;
		}
		.auto-new-line{
    
    
			overflow : hidden;
			text-overflow: ellipsis;
 			display: -webkit-box;
			/* -webkit-line-clamp: 2; */
			-webkit-box-orient: vertical;
			word-wrap:break-word;
			word-break:break-all;
		}
		
		.table-new-line{
    
    
			overflow : hidden;
			text-overflow: ellipsis;
			word-wrap:break-word;
			word-break:break-all;
		}
		.table-button{
    
    
			border-radius: 5rpx;
			font-size: 18rpx;
			padding: 0 0;
			margin: 10rpx 10rpx;
			background-color: #0081ff;
			color: #ffffff;
		}
		.oddrowcolor{
    
    
			background-color:#ecf5ff;
		}
		.evenrowcolor{
    
    
			background-color:#f5f7fa;
		}
</style>