tbody加滚动条实现思路:

1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。

2,把thead的tr设置成display:block。

3,因为都设置成block所以要给td手动添加宽度。

4,考虑到 tbody 产生了滚动条,这时会影响tbody以及thead的宽度,可以采用针对tbody设置::-webkit-scrollbar进行解决。

办公资源网址导航 https://www.wode007.com

代码实现:

css:

 .table thead tr {
display:block;
}
.table tbody {
display: block;
height: 100px;
overflow: auto;
}
.table th {
width:%;
}
.table td {
width:%;
}

html:

 <table class="table">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tbody>
</table>

怎么给tbody加滚动条?通过css样式给表格tbody加垂直滚动条的更多相关文章

  1. 通过css样式给表格tbody加垂直滚动条

    tbody加滚动条实现思路: 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto. 2,把thead的tr设置成display:block. ...

  2. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  3. 动态加载/删除css文件以及图片预加载

    动态加载/删除css文件以及图片预加载   功能模块页面   最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...

  4. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  5. Bootstarp--全局CSS样式之表格

    表格在实际开发中可以说是非常常见的,但是有很多人不喜欢使用表格,但个人觉得在简单的界面布局中使用表格还是很简单的.毕竟人家给了表格这元素,而你却不去使用,貌似有点不解风情. 下面简单介绍Bootstr ...

  6. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  7. CSS样式之表格,表单

    布局样式 .container:固定宽度并具响应式 .container-fluid自由宽度(100%宽度) 标题样式 <h1>到<h6> 样式已经写好了,可以直接用,兼容性也 ...

  8. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  9. JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(n ...

随机推荐

  1. Github 创建SSH密钥克隆仓库详解

    1.登录Github主页,点击任意一个repository,点击Clone or download,点击Use SSH 2.点击add a new pulbic key,创建公钥 3.下面图中的Tit ...

  2. BitMap算法及其实现(Python)

    BitMap概述 本文介绍 BitMap 算法的应用背景,算法思想和相关实现细节. 概括而言,BitMap 主要用来解决海量数据中元素查询,去重.以及排序等问题.这里对海量数据场景的强调,似乎暗示了这 ...

  3. iOS -UIColor随机生成颜色的方法

    在iOS 中的UIColor拥有这么多关于颜色的类方法,对于一般常见的UI控件,我们可以通过[UIColorblackColor]设置背景色 eg:设置button 的背景色为红色 UIButton ...

  4. 区分http请求状态码来理解缓存(协商缓存和强制缓存)

    什么是http缓存呢,当我们使用chrome浏览器,按F12打开控制台,在网络请求中有时候看到状态码是200,有时候状态码是304,当我们去看这种请求的时候,我们会发现状态码为304的状态结果是:St ...

  5. Docker镜像与容器的常用操作

    Docker镜像加速配置:Docker镜像常用操作:Dcoker容器常用操作. 镜像加速器 国内从 Docker Hub 拉取镜像有时会遇到困难,此时可以配置镜像加速器.国内很多云服务商都提供了国内加 ...

  6. Jenkins登录无效

    解决办法: 进入Jenkins安装目录: 1:进入D:\jenkins\users\admin 这个目录下找到config.xml  可以看到里面的用户名是admin 2:进入D:\jenkins\s ...

  7. CKA考试个人心得分享

    考试相关准备: 真题:需要的私密: 网络:必须开启VPN,以便能访问国外网络,强烈建议在香港搭建相应FQ: 证件:考试需要出示含有拉丁文(英文)带照片的有效证件,相关有效证件参考(优先建议护照):ht ...

  8. 这一次搞懂Spring的Bean实例化原理

    文章目录 前言 正文 环境准备 两个重要的Processor 注册BeanPostProcessor对象 Bean对象的创建 createBeanInstance addSingletonFactor ...

  9. 《Java并发编程的艺术》 第9章 Java中的线程池

    第9章 Java中的线程池 在开发过程中,合理地使用线程池能带来3个好处: 降低资源消耗.通过重复利用已创建的线程 降低线程创建和销毁造成的消耗. 提高响应速度.当任务到达时,任务可以不需要等到线程创 ...

  10. Eplan PLC连接点模块为什么不显示“路径功能文本”,已解决

    Eplan PLC连接点模块为什么不显示“路径功能文本”,已解决 如果“路径功能文本”的文字开头的位置没有对准PLC模块的中心,PLC连接点模块就不会显示.