表格滚动条 (tbody部分滚动)

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注简书: 小贤笔记

html

<table><thead><tr><th>开始年</th><th>年效</th><th>分享比例</th><th>补贴电价</th></tr></thead><tbody><tr><td>2018</td><td>5</td><td>5：9</td><td>补贴电价</td></tr><tr><td>2018</td><td>5</td><td>5：9</td><td>补贴电价</td></tr><tr><td>2018</td><td>5</td><td>5：9</td><td>补贴电价</td></tr><tr><td>2018</td><td>5</td><td>5：9</td><td>补贴电价</td></tr></tbody>
</table>

css

table {width: 100%;border-collapse: collapse;text-align: center;tr {height: 0.44rem;td,th {width: 1rem;}}thead {display: block;width: 100%;tr {background: #519FF1;font-size: 0.15rem;color: #FFFFFF;th {font-weight: normal;}}}tbody {display: block;width: 100%;height: 1.32rem;overflow: auto;tr:nth-child(odd) {background: #FFFFFF;}tr:nth-child(even) {background: #DCECFC;}}
}

转载于:https://www.cnblogs.com/shenxianhui/p/9361896.html

表格滚动条 (tbody部分滚动)相关推荐

CSS实现表格表头（thead）固定，内容（tbody）滚动
前言最近在写一个项目,然后要实现表头固定,tbody内容滚动的效果,该项目中没有使用任何插件,并且表格列数蛮多的,刚开始实现起来遇到各种问题,感觉蛮复杂的,后来找到了一种利用transform的方法 ...
python tqdm 不换行_python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
默认的tqdm的滚动条的宽度很大,所以会使得总长度超过窗口一行所能显示的量,所以发生上下滚动解决方法:初始化tqdm时,初始化行数参数ncols=10,这个值可以自己调:尽量大到不能引起上下滚动,同 ...
php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动
本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...
vue 固定div 滚动_vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ r ...
element ui 表格滚动条抖动的问题
1. 把.el-table的样式设为:position: absolute .el-table {position: absolute !important; } 2. 把包着表格的父级设为 posi ...
css-隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
css 隐藏滚动条竖向y滚动，横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
js计时器案例--带滚动条的无缝滚动
带滚动条的无缝滚动一.效果图二.设计思路三.核心代码一.效果图二.设计思路第一步:克隆两个ul,使用循环计时器进行无缝滚动第二步:设置滚动的速度和时间第三步:设置鼠标进去box停止滚动 ...
使用JS实现表格宽度任意竖轴滚动时表头固定
前言: 在实际项目开发中遇到类似需求,本来想当然地用table-layout ,但是这个属性并不能很好的应用在任意宽度的表格上.至于其他解决方案就是给td手动设置固定宽度,这种方法并不具有通用性,但是 ...
vue watch 修改滚动条_vue实现滚动监听，点击瞄点平滑滚动，控制内嵌滚动条滚动...
滚动效果当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...

表格滚动条 (tbody部分滚动)

表格滚动条 (tbody部分滚动)相关推荐

最新文章

热门文章

表格 滚动条 (tbody部分滚动)

表格 滚动条 (tbody部分滚动)相关推荐

最新文章

热门文章

表格滚动条 (tbody部分滚动)

表格滚动条 (tbody部分滚动)相关推荐