通过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的文件编码和页面不一致 ...
随机推荐
- k8s登录harbor报错:Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request cance
[root@k8s-node02 ~]# docker login 192.168.180.105:1180 Username: admin Password: Error response from ...
- Maven的settings.xml配置详解
子节点详细介绍转载:http://www.cnblogs.com/jingmoxukong/p/6050172.html?utm_source=gold_browser_extension 全局配置 ...
- android 任务栈及启动模式
1.一个应用程序一般都是由多个activity组成的.2.任务栈(task stack)(别名back stack后退栈) 记录存放用户开启的activity的.3.一个应用程序一被开启系统就给他分配 ...
- 获取项目配置的常用方法(Struts/Servlet)
struts: //web.xml中: <context-param> <param-name>paramName</param-name> <param-v ...
- 原生js实现简单的放大镜效果
前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...
- 利用Javascript解决HTML大数据列表引起的网页加载慢/卡死问题。
在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死). 也许你们会说可以分页或动态加载啊?但是有可能需求不允许分页,动态加载?网络的延迟也 ...
- mysqlbinlog读懂binlog
binlog 报unknown variable 'default-character-set=utf8' 方法1: 在/etc/my.cnf 中将default-character-set=utf8 ...
- Bash is an sh-compatible command language interpreter that executes commands read from the standard input or from a file.
w https://linux.die.net/man/1/bash bash - GNU Bourne-Again SHell Description Bash is an sh-compatibl ...
- leetcode 111二叉树的最小深度
使用深度优先搜索:时间复杂度O(n),空间复杂度O(logn) /** * Definition for a binary tree node. * struct TreeNode { * int v ...
- Retrofit RestAdapter 配置说明
RestAdapter.Builder builder = new RestAdapter.Builder(); builder.setEndpoint(ip地址 ...