本文是从简书复制的, 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部分滚动)的更多相关文章

  1. WPF学习笔记(5):两个DataGrid的滚动条实现同步滚动

    效果:两个DataGrid的滚动条实现同步滚动. 代码参考了博客园chuncn的文章<.net中同步多个ScrollViewer滚动的四种方法>,原文是针对ListBox的.现改为针对Da ...

  2. VS编程,WPF中两个滚动条 ScrollViewer 同步滚动的一种方法

    原文:VS编程,WPF中两个滚动条 ScrollViewer 同步滚动的一种方法 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/ar ...

  3. 滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置

    原文:滚动条ScrollViewer防止滚动时按内容跳跃式滚动的设置 属性中将CanContentScroll设置为False,滚动时就不会跳了,会连续的滚动

  4. delphi 如何让ScrollBox的内容与滚动条一起实时滚动

    delphi 如何让ScrollBox的内容与滚动条一起实时滚动 拖动滚动条后只有释放鼠标键,ScrollBox的内容才会滚动到实际位置,不爽.请问高人,怎样才能使拖动ScrollBox的滚动条的同时 ...

  5. table表格数据无缝循环滚动

    分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox">              ...

  6. 用 mCustomScrollbar 滚动条插件实现滚动更新添加数据

    在公司的一个小项目中,需要从后台获取一大堆数据,为了用户体验的考虑,需要分部加载,然后就在网上找了很多的滚动插件,终于找到一个合适的.mCustomScrollbar插件地址 点击这里 它有各种各样的 ...

  7. fixed元素随滚动条无抖动滚动

    页面上用fixed定位一个元素,随滚动条滚动位置不变,最开始我只用了css给元素身上写上fixed属性,发现滚动时元素会发生抖动,随后我就在网上找到解决办法,封装了个方法,如下: Css部分 此部分是 ...

  8. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

  9. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

随机推荐

  1. 2016级算法第五次上机-B.Bamboo&APTX4844魔发药水

    Bamboo&APTX4844魔发药水 题意 "于是,Bamboo耐着性子,看巫师从袖子里掏出 M 瓶时光泉水和 K 粒绿色能量.每瓶时光泉水重量为 c ,生发效果为 l:每粒绿色能 ...

  2. docker 创建容器的时候的坑

    其实这个题目的话,对于我后面陈述的问题发生的本身并没有太多的联系,但是因为是在docker创建容器的操作之内发生的,所以记录以下 因为网上有些文章有些作者喜欢使用git的命令窗体,说实在的,公司里面用 ...

  3. stark - 2 ⇲路由分发

    在介绍前面三个注意点后,开始写stark组件内容. from django.apps import AppConfig from django.utils.module_loading import ...

  4. vue 移动端,页面左右页面切换效果(切换过程中会出现白屏效果,布吉岛怎么优化,后来就发布前就弃用了)

    <transition name="left"> <router-view v-if="getCms" class="Router& ...

  5. GIF图制作

    一.安装image 首先在cmd中敲入代码pip install imageio,以便制作动图 二.安装完之后便可读取gif了 在idle中输入代码 import imageio savename = ...

  6. condition实现原理

    condition是对线程进行控制管理的接口,具体实现是AQS的一个内部类ConditionObject,主要功能是控制线程的启/停(这么说并不严格,还要有锁的竞争排队). condition主要方法 ...

  7. 【Docker】制作一个支持SSH终端登录的镜像

    首先从官方或者docker.cn的镜像库中pull下来ubuntu镜像: docker pull ubuntu 现在用命令查看一下pull下来的ubuntu镜像: docker images 关于如何 ...

  8. Xcode插件路径、缓存路径、图片压缩工具路径、代码片段路径、symbolicatecrash路径

    Xcode插件路径 ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins   Xcode缓存路径 ~/Library/Devel ...

  9. ASP.NET MVC4 新手入门教程之九 ---9.查询详情和删除方法

    在本教程的这一部分,您会检查自动生成的Details和Delete方法. 检查详细信息和删除方法 打开Movie控制器并检查的Details的方法. public ActionResult Detai ...

  10. Spring 数据传入

    表单传入 前端代码: <form method="POST" id="user_login_submit"> <div class=" ...