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>