通过css样式给表格tbody加垂直滚动条
tbody加滚动条实现思路:
1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。
2,把thead的tr设置成display:block。
3,因为都设置成block所以要给td手动添加宽度。
4,考虑到 tbody 产生了滚动条,这时会影响tbody以及thead的宽度,可以采用针对tbody设置::-webkit-scrollbar进行解决。
代码实现:
.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 100px;
overflow: auto;
}
.table th {
width:%;
}
.table td {
width:%;
}
通过css样式给表格tbody加垂直滚动条的更多相关文章
- 怎么给tbody加滚动条?通过css样式给表格tbody加垂直滚动条
tbody加滚动条实现思路: 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto. 2,把thead的tr设置成display:block. ...
- 给tbody加垂直滚动条的具体思路
[给tbody加垂直滚动条的具体思路] 给tbody加垂直滚动条的思路就是把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto即可 参考:http ...
- 11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...
- Bootstrap表格中,thead固定,tbody有垂直滚动条
1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- CSS样式之表格,表单
布局样式 .container:固定宽度并具响应式 .container-fluid自由宽度(100%宽度) 标题样式 <h1>到<h6> 样式已经写好了,可以直接用,兼容性也 ...
- CSS样式—— 字体、元素的垂直水平居中
1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...
- Bootstarp--全局CSS样式之表格
表格在实际开发中可以说是非常常见的,但是有很多人不喜欢使用表格,但个人觉得在简单的界面布局中使用表格还是很简单的.毕竟人家给了表格这元素,而你却不去使用,貌似有点不解风情. 下面简单介绍Bootstr ...
- 笔记:1.css样式,最前边加 @charset "utf-8";是为什么2.js判断各种浏览器的方法
表明CSS文件的页面编码为UTF-8..如果这个CSS的文件编码也是UTF-8的话..那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文,如果CSS的文件编码和页面不一致 ...
随机推荐
- CF1051F The Shortest Statement Dijkstra + 性质分析
动态询问连通图任意两点间最短路,单次询问. 显然,肯定有一些巧妙地性质(不然你就发明了新的最短路算法了233)有一点很奇怪:边数最多只比点数多 $20$ 个,那么就可以将这个图看作是一个生成树,上面连 ...
- [ZJU 1010] Area
ZOJ Problem Set - 1010 Area Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge Jer ...
- android 启动默认的邮件客户端,多附件的问题
目前开发的app中需要发送邮件,所以需要调用android默认的邮件客户端,并需要添加多个邮件附件,我该通过哪个组件调用默认的客户端?用什么组件来支持多个附件的电子邮件? 是通过下面的哪一个?(Int ...
- (41)freeRTOS之任务管理
1. 简介: 在 FreeRTOS 中没有线程和进程的区别,只有一个被翻译成任务的程序,相当于进程的概念,拥有独立的栈空间. 对于实时性,可以分为 软实时.硬实时:桌面电脑的输入处理可以看做是软实时, ...
- TypeScript快速笔记(一)
刚学习TypeScript,但因为马上要用,主要是寻求先快速上手,而后再求精. 推荐学习网站: 1)https://www.runoob.com/typescript/ts-tutorial.html ...
- Java实体类之间的映射(多对多关系)
多对对的映射,可以用学生和课程进行演示.一个学生可以选择多个课程,一个课程又对应了多个学生 定义学生类 class Stu{ private String name; private String n ...
- debugfs linux rm 删除 恢复 Attempt to read block from filesystem resulted in short read while opening filesystem
w 删除具有空字符的文件 反斜杠来转义下一个字符 rm -R Samples\ -\ Copy well@well:/home/etc/project/apilinux/MarketplaceWebS ...
- vue+ts修改父组件属性的写法。
部分代码如下: 父组件: <coupon :modifyFlag.sync="flag" /> data() { return { fl ...
- Powershell&TFS_Part 1
目录 目录 前言 TFS 对象模型 Powershell Powershell面向对象 Powershell默认会在PC中设置执行脚本权限 调试脚本 断点 Step Microsoft Visual ...
- Android在WindowManagerService和ActivityManagerService中的Token
https://upload-images.jianshu.io/upload_images/5688445-6cf0575bb52ccb45.png 1. ActivityRecord中的token ...