vue 移动端table表格 固定首列和首行(简单粗暴) |
您所在的位置:网站首页 › 表格怎么操作第一行不滑动了 › vue 移动端table表格 固定首列和首行(简单粗暴) |
效果图,不会做gif。。。只有静态预览: 上下滑动的时候固定了顶部,并且往左滑的时候冻结了第一列。 代码 : 主要原理就是用 position: sticky;这个属性,粘在top==0px的时候. 字段 {{i+1}} {{j+1}} export default { data() { return { title:'', isLoading: null, testInfo: {} }; }, mounted() { }, methods: { } }; .report_detail { table{ border-collapse: collapse; th,td{ padding: 5px;text-align: center;min-width: 100px; font-size: 12px; line-height: 17px; text-align: center; padding: 9px 14px 8px; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; } th{ background-color: #eaf2fc;position: sticky;top:0px; } td{ background-color: #fff; } td:first-child{background-color: #fff;position: sticky;left:0px;} th:first-child{position: sticky;left:0px;z-index: 666;} } }
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |