怎么给tbody加滚动条?通过css样式给表格tbody加垂直滚动条
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加垂直滚动条的更多相关文章
- 通过css样式给表格tbody加垂直滚动条
tbody加滚动条实现思路: 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto. 2,把thead的tr设置成display:block. ...
- css设置滚动条颜色与样式以及如何去掉与隐藏滚动条
我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...
- 动态加载/删除css文件以及图片预加载
动态加载/删除css文件以及图片预加载 功能模块页面 最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...
- 11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...
- Bootstarp--全局CSS样式之表格
表格在实际开发中可以说是非常常见的,但是有很多人不喜欢使用表格,但个人觉得在简单的界面布局中使用表格还是很简单的.毕竟人家给了表格这元素,而你却不去使用,貌似有点不解风情. 下面简单介绍Bootstr ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- CSS样式之表格,表单
布局样式 .container:固定宽度并具响应式 .container-fluid自由宽度(100%宽度) 标题样式 <h1>到<h6> 样式已经写好了,可以直接用,兼容性也 ...
- CSS样式—— 字体、元素的垂直水平居中
1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...
- JS判断移动端访问设备并加载对应CSS样式
JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(n ...
随机推荐
- java实现 蓝桥杯 算法训练 安慰奶牛
问题描述 Farmer John变得非常懒,他不想再继续维护供奶牛之间供通行的道路.道路被用来连接N个牧场,牧场被连续地编号为1到N.每一个牧场都是一个奶牛的家.FJ计划除去P条道路中尽可能多的道路, ...
- linux系统判断内存是否达到瓶颈的小技巧
1.linux下最常用的系统状态监控工具top 工具,可以使用top -c 来进行查看当前内存的占用情况 free 为内存的剩余状态,当前为3.8G的空闲内存,总的物理内存是8G,按键 shift+m ...
- 因为 MongoDB 没入门,我丢了一份实习工作
有时候不得不感慨一下,系统升级真的是好处多多,不仅让我有机会重构了之前的烂代码,也满足了我积极好学的虚荣心.你看,Redis 入门了.Elasticsearch 入门了,这次又要入门 MongoDB, ...
- 【1】Vim 进阶操作
一.标签 :tabnew one.c 新建标签[♥] 常用 :tabc 关闭文件 :tabp 切换前一个页面 :tabn 切换下一个页面 gt 普通模式下操作 常用 二.窗口 :sp 水平 ...
- js数组的常见操作( push、pop、unshift、shift、splice、concat、 join)的用法
1.数组添加删除 头部或尾部( push().pop().unshift().shift() ) 例2.数组尾部添加 push()方法可向数组的末尾添加一个或多个元素,并返回新的长度 语法:array ...
- python2.7 函数的参数学习
1.默认参数 默认参数可以简化函数的调用. 设置默认参数时,有几点要注意: 一.必选参数在前,默认参数在后,否则Python的解释器会报错. 二.当函数有多个参数时,把变化大的参数放前面,变化小的参数 ...
- RabbitMQ系列之【启动过程中遇到问题及解决方案】
1.如果显示找不到主机,请在hosts文件中添加: vi /etc/hosts 127.0.0.1 localhost 2.从3.3.1版本开始,RabbitMQ默认不允许远程ip登录,即只能使用lo ...
- 一张图搞懂Ubuntu安装时姓名、计算机名、用户名
安装Ubuntu时会要求填写如下图的信息: 感谢:苏守坤 注意:上面的博客讲述了各自的具体含义,本篇博客只是说明这些名称在系统安装后会出现的位置.
- [每日一题2020.06.11]Codeforces Round #644 (Div. 3) H
A-E见 : 这里 题目 我觉得很有必要把H拿出来单独发( 其实是今天懒得写题了 ) problem H 一个从 1 到 $ 2^m - 1$ 的长度为m的连续二进制序列, 删去指定的n个数, 问剩余 ...
- 2019-02-03 线性表的顺序储存结构C语言实现
#include<cstdio> #define MAXSIZE 20 typedef int Elemtype; //Elemtype类型根据实际情况而定,这里取int typedef ...