vue 表格固定首行首列(纯css)

<template>
<div className="table_wrap"><table><thead><tr><th v-for="(n,i) of 6" :key="i">表头{{i}}</th></tr></thead><tbody><tr v-for="(n,i) of 100" :key="i"><td v-for="(m,j) of 6" :key="j">内容{{j}}</td></tr></tbody></table>
</div>
</template>

<style lang="scss" scoped>
.table_wrap{width:100%;height: 80vh;overflow: auto;border-bottom:1px solid #61dafb;
}
table {table-layout: fixed;width: 100%;border-collapse:separate;border-spacing:0;border:0;
}td, th{width:150px;box-sizing: border-box;border-right:1px solid red;border-bottom:1px solid red;/*超出长度...*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}thead tr th {position:sticky;top:0;// background:#61dafb;background:pink;
}th:first-child, td:first-child {position:sticky;left:0;background:#61dafb;
}
th:first-child {z-index:1; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/background:pink;
}</style>

参考来源:
纯css实现table固定首行、首列
vue表格实现固定表头首列(使用了js)

vue 表格固定首行首列(纯css)相关推荐

html表格固定首行首列
html表格固定首行首列,适用于标准表格,格式如下: <div><table><tbody><tr><th></th></ ...
table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
table固定首行首列
原理表格左右拆分,再上下拆分,最后拆分为四个table容器滚动右下table时,加scroll事件,控制左下scrollTop与右上scrollLeft两个table的scroll值注意左下. ...
CSS笔试题: 实现表格首行首列固定和自适应窗口
今天校招笔试题要求实现一个首行首列固定,宽度自适应窗口变化,但窗口缩小到一定宽度不能再缩小,出现水平滚动条- 当时我写错了,我一时想不起改用什么办法首行首列固定,用绝对定位,父亲相对定位-这样会有很多 ...
js实现表格首行首列固定滑动
js+css实现table首行首列的冻结效果. 这个方案是把表格分为4块,首行首列不可滑动,利用onscroll 动态根据内容设置冻结首行首列内容. html <div id="lef ...
【Axure视频教程】固定中继器表格首行首列
今天教大家在Axure里如何制作固定中继器表格首行首列的原型模板,包括固定首行(标题行)和首列.固定首行(标题行)和前两列两个案例,因为是用中继器表格制作的,所以使用也非常方便,我们只需要在中继器表格 ...
HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
表格html适应手机端,纯CSS实现响应式表格适应移动端
由于手机屏幕空间有限,太大的表格很难友好显示,本文介绍一种使用纯CSS实现响应式表格的方法,可以比较完美的在手机端显示. 在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每 ...
手机移动端加载更多（表格首行首列固定vue + vant完整版）
直接看效果图和实现的代码 <van-list:offset="60"v-model="isLoading":finished="finished ...

vue 表格固定首行首列(纯css)

vue 表格固定首行首列(纯css)相关推荐

最新文章

热门文章