表格 滚动条 (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;
}
}
}
表格 滚动条 (tbody部分滚动)的更多相关文章
- WPF学习笔记(5):两个DataGrid的滚动条实现同步滚动
效果:两个DataGrid的滚动条实现同步滚动. 代码参考了博客园chuncn的文章<.net中同步多个ScrollViewer滚动的四种方法>,原文是针对ListBox的.现改为针对Da ...
- VS编程,WPF中两个滚动条 ScrollViewer 同步滚动的一种方法
原文:VS编程,WPF中两个滚动条 ScrollViewer 同步滚动的一种方法 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/ar ...
- 滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置
原文:滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置 属性中将CanContentScroll设置为False,滚动时就不会跳了,会连续的滚动
- delphi 如何让ScrollBox的内容与滚动条一起实时滚动
delphi 如何让ScrollBox的内容与滚动条一起实时滚动 拖动滚动条后只有释放鼠标键,ScrollBox的内容才会滚动到实际位置,不爽.请问高人,怎样才能使拖动ScrollBox的滚动条的同时 ...
- table表格数据无缝循环滚动
分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox"> ...
- 用 mCustomScrollbar 滚动条插件实现滚动更新添加数据
在公司的一个小项目中,需要从后台获取一大堆数据,为了用户体验的考虑,需要分部加载,然后就在网上找了很多的滚动插件,终于找到一个合适的.mCustomScrollbar插件地址 点击这里 它有各种各样的 ...
- fixed元素随滚动条无抖动滚动
页面上用fixed定位一个元素,随滚动条滚动位置不变,最开始我只用了css给元素身上写上fixed属性,发现滚动时元素会发生抖动,随后我就在网上找到解决办法,封装了个方法,如下: Css部分 此部分是 ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
随机推荐
- Oracle中-事务-序列-视图-数据类型笔记
事务(Transaction) 事务(Transaction)是一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位,是数据库环境中的逻辑工作单位. 事务是为了保证数据库的完整性 在o ...
- 主流服务器虚拟化技术简单使用——KVM(一)
Tips:因为博客园排版的原因,图片显示不清晰,可以放大网页查看清晰图片. 如果系统使用物理机,需要在BIOS里面开启Intel VT-x(或AMD-V),如果是VMware workstation, ...
- vue项目里登录界面实现回车登录
全局监听enter键,是把监听事件绑定到document上,无需获取焦点之类的 created() { let that = this; document.onkeydown =function(e) ...
- 转 $.ajax()方法详解
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- Service启动流程
Service启动流程从整个宏观上来看,它的模型如下 startService启动流程时序图 Activity中使用的startService方法是定义在Context的抽象类中,它的真正实现者是Co ...
- <asp:FileUpload>控件 获取不到文件名
<asp:FileUpload>控件 放在了<asp:UpdatePanel>控件中会导致获取不到文件名.
- spring data jpa关联查询(一对一、一对多、多对多)
在实际过往的项目中,常用的查询操作有:1.单表查询,2.一对一查询(主表和详情表)3.一对多查询(一张主表,多张子表)4.多对多查询(如权限控制,用户.角色多对多).做个总结,所以废话不多说. 使用i ...
- C#利用WebBrowser获取完整COOKIE
代码: http://www.cnblogs.com/hsapphire/archive/2010/09/10/1823384.html http://blog.csdn.net/attilax/ar ...
- Robot Framework_Ride(Settings)
Settings 不管是测试套件还是测试用例都会有一个“Settings>>”的按钮,因为它默认是被折叠起来的,所以,一般不太容易发现它,更不知道点击它之后是可以展开的 1.测试用例的 S ...
- HTML5离线资源缓存简介
cache manifest 示例 要使用离线资源缓存,开发者首先要提供一个 cache manifest 文件 它列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地 下面就是一个 c ...