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. iOS-自定义 UITabBarController

    先来回顾一下UITabBarController ( 稍微详细的在在http://blog.csdn.net/yang198907/article/details/49807011) 伴随UITabB ...

  2. ASP.NET Core 3.1 WebApi+JWT+Swagger+EntityFrameworkCore构建REST API

    一.准备 使用vs2019新建ASP.NET Core Web应用程序,选用api模板: 安装相关的NuGet包: 二.编码 首先编写数据库模型: 用户表 User.cs: public class ...

  3. 7. redux

    1.所有的状态统一放在state中,由store来管理state 2.用户触发一个action行为,由dispatch分发action行为 3.通过store把原有的state的状态值和dispatc ...

  4. 解决:gradle 前言中不允许有内容

    将Android Studio 升级到4.0然后创建一个新项目,编译出现“ gradle 前言中不允许有内容” 的错误,在网上找了很多资料,众说纷纭,但都没有解决我的问题,最后反复摸索把问题解决了. ...

  5. @atcoder - AGC018F@ Two Trees

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定两棵树 A, B.现你需要构造一组值 (X1, X2, .. ...

  6. 测试必备工具之最强抓包神器 Charles,你会了么?

    前言 ​ 作为软件测试工程师,大家在工作中肯定经常会用到各种抓包工具来辅助测试,比如浏览器自带的抓包工具-F12,方便又快捷:比如时下特别流行的Fiddler工具,使用各种web和APP测试的各种场景 ...

  7. matplotlib浅析

    首先放出matplotlib的中英文文档: 中文:https://www.matplotlib.org.cn/ 英文:https://matplotlib.org/3.1.1/index.html M ...

  8. JavaSE基础之数组

    数组 一.静态初始化 格式一 数据类型[] 变量名 = {元素1,元素2,元素3...}; 格式二 数据类型[] 变量名 = new 数据类型{元素1,元素2,元素3...}; 或者: 数据类型[] ...

  9. VUE+ELEMENT-UI的后台项目封装组件--查询form的封装

    最近项目打算重构,项目的模块几乎都是以后台查询展示的传统的增删改差模式,所以卑微的我想要自己封装一下查询form,先上效果图 子组件页面: <template> <div class ...

  10. 基于node的前端项目编译时内存溢出问题

    解决方法: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,这里说的 Jav ...