准备

在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");// debuggerfor(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>

uniapp 固定首行和固定列的表格相关推荐

固定Excel首行和首列作为标题以及某些行和列
固定Excel首行和首列作为标题以及某些行和列 Excel功能十分强大,可以通过表格形式直观的看很多内容,而且灵活的表格样式设计也让用户有更多的呈现能力,首行和首列一般都作为标题存在,很多时候我们都希 ...
axure中怎么做出固定首行_Excel:固定表头的方法
Hi,大家好,我们今天讲一下常用的固定表头或者首列的方法,方便翻页时看到首行首列等. 一.功能将用户需要的行或列进行固定,方便翻页观看. 二.表示使用视图菜单里的冻结窗格按钮. 三.简单应用场景 ...
在Excel中固定行标题和列标题
在Excel中固定行标题和列标题,也就是让第一列或者第一行在滚屏的时候保持不动,方法很简单,如下: 如果想固定第一行,则选定第二行,然后在菜单栏选择,窗口,冻结窗格如果想固定第一列,则选定第二列,然 ...
纯css position:sticky 实现表格首行和首列固定
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个c ...
axure中怎么做出固定首行_办公软件操作技巧078：如何在excel表格中冻结行与列...
在日常工作中,有时我们编辑的excel表格会比较大,数据内容有很多行和列,当我们拖动滚动条找到了离表头比较远的数据行或列的内容时,又看不到行或列表头标题信息了,这时再去处理数据信息就会感觉很不方便,如 ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
html表格固定首行首列
html表格固定首行首列,适用于标准表格,格式如下: <div><table><tbody><tr><th></th></ ...
table表头和首列的表格固定-CSS实现的Table表头固定
效果就是上图表头是固定的, 跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动下面是代码原文是查看 <!DOCTYPE html> <html> <head> &l ...
EXCEL如何固定住一行和一列
就是做表格的EXCEL 我想把第一行和第一列固定住,就是往下拉的时候,第一行还是在最上面能看得见;往右拉的时候,第一列的内容还看得见怎么搞呢我是用EXCEL2007 --------------- ...

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

准备

效果

代码

uniapp 固定首行和固定列的表格相关推荐

最新文章

热门文章