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. effictive c++

    c++条款 num 1:尽量以const enum inline替换#define 1)对于单纯常量,最好以const对象或enums替换#defines 2)对于形似函数的宏,最好改用inline函 ...

  2. 为什么阿里巴巴Java开发手册中不允许魔法值出现在代码中?

    在阅读<阿里巴巴Java开发手册>时,发现有一条关于关于常量定义的规约,具体内容如下: 图中的反例是将数据缓存起来,并使用魔法值加链路 id 组成 key,这就可能会出现其他开发人员在复制 ...

  3. Springboot 的单元测试

    1 测试基础类 @RunWith(SpringRunner.class) @SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment. ...

  4. centos7上安装memcached以及PHP安装memcached扩展(一)

    安装memecached 第一步:安装libevent # tar zvxf libevent-2.1.8-stable.tar.gz # cd libevent-2.1.8-stable # ./c ...

  5. 【福利】FL Studio 20 汉化补丁包 _FL Studio 20 汉化包下载

    我这两天在网上搜索FL Studio 20汉化包,找了半天也没有找到真正的汉化包,不过好在功夫不负有心人,让我找到了一个不错的FL Studio 20汉化网站,里面提供了FL Studio 20汉化包 ...

  6. Ehab and a 2-operation task【数论思想】

    Ehab and a 2-operation task 题目链接(点击) You're given an array aa of length nn. You can perform the foll ...

  7. Dorado开发——树形下拉框

    最近在学习Dorado开发的过程中,遇到了一个问题,Dorado的树形下拉框选择:Dorado默认情况下父节点和子节点都是可选的,而我要实现的是父节点不可选. 解决办法:在下拉框中,判断父子节点,点击 ...

  8. Calculating a “Row X of Y”

    显示 “Row X of Y,” ,X是当前行,Y是总行数,  那就是 ROW_NUMBER(ORDER BY stor_id) of Count(*) OVER()此处还是以样例数据库 pub 为例 ...

  9. GitHub 热点速览 Vol.24:程序员自我增值,优雅赚零花钱

    摘要:升职加薪,出任 CTO,迎娶白富美/高帅富,走向人生巅峰是很多人的梦想.在本期的热点速览中你将了解自由作者 Easy 如何优雅赚取零花钱的方法,以及定投改变命运 -- 让时间陪你慢慢变富.说到程 ...

  10. numpy矩阵相加时需注意的一个点

    今天在进行numpy矩阵相加的时候出现了一个小的奇怪的地方,下面我们来看看: >>>P = np.array([1,2,3,4]) >>>F = np.array( ...