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. 为什么阿里巴巴Java开发手册中强制要求接口返回值不允许使用枚举?

    在阅读<阿里巴巴Java开发手册>时,发现有一条关于二方库依赖中接口返回值不允许使用枚举类型的规约,具体内容如下: 在谈论为什么之前先来科普下什么是二方库,二方库也称作二方包,一般指公司内 ...

  2. Autoware 进行 Robosense-16 线雷达与 ZED 双目相机联合标定!

    项目要标定雷达和相机,这里记录下我标定过程,用的速腾 Robosense - 16 线雷达和 ZED 双目相机. 一.编译安装 Autoware-1.10.0 我没有安装最新版本的 Autoware, ...

  3. Dedecms升级php版本{dede:field.body/}不解析,文章内容不显示

    Dedecms升级php7后发布文章后,发现前端显示的文章内容都是空白,只能显示标题.关键词.描述等. 第一种方法: 把{dede:field.body /}删除,使用 下面的sql 标签代码替换: ...

  4. CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...

  5. 阿里巴巴二面凉经 flatten扁平化对象与数组

    2020-04-13 阿里巴巴二面凉经 flatten扁平化对象与数组 在线笔试的时候写错了一点点 太可惜了哎 还是基础不够扎实... const input = { a: 1, b: [ 1, 2, ...

  6. Linux dd工具磁盘读写测试分析

    话说,Linux 自带的dd工具测试硬盘读写速度只能提供一个大概的测试结果,而且是连续IO 而不是随机IO ,理论上文件规模越大,测试结果越准确.理论上bs越大,所测得性能越高. 上句来自网上,是不是 ...

  7. 华为海思搞定4K60fps!Vmate掌上云台相机国内首发

    目录 Snoppa Vmate Snoppa Vmate Snoppa Vmate是一款掌上型的高性能4K摄像机,集成了微型机械三轴增稳云台,一体化机身集成可操控式触摸屏,既可以独立使用,也可以无线连 ...

  8. loadrunner安装负载机

    1,安装docker 2,下载最新版本的load_generator镜像,命令如下: docker pull hpsoftware/load_generator 3,load_generator镜像实 ...

  9. 视频的清晰度 1080p 720p 2k 4k是什么意思?

    在bilibili上看了一些个视频,发现它视频的清晰度有很多种选法.诸如720p,1080p,2k,4k,以及我看直播时经常遇见的蓝光,超清.它们的含义分别是什么呢?为了搞清楚这个问题,也为了以后的观 ...

  10. cb29a_c++_STL_算法_查找算法_(2)search_n

    cb29a_c++_STL_算法_查找算法_(2)search_n//比如:连续查找连续的n个8search_n(b,e,c,v),迭代器b,begin(),e,end().连续的c个vpos=sea ...