怎么给tbody加滚动条?通过css样式给表格tbody加垂直滚动条
2024-08-24 13:37:11
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>
最新文章
- Flux 普及读本
- 【CoreData】 简单地使用
- ios的链式编程笔记
- PHP-----类与对象,成员方法,成员属性,构造方法,析构方法
- H20的题——[noip2003]银河英雄传(并查集)
- 用原生javascript做的一个打地鼠的小游戏
- 带节日和农历的js日历 带农历的脚本:
- [CAMCOCO][C#]我的系统架构.服务器端.(二)----DATA层
- Java 和 Javascript 的 Date 与 .Net 的 DateTime 之间的相互转换
- React开发项目例子
- AIX系统开启ftp服务
- plsql连接oracle
- 使用Mongo进行分页
- 数据库性能测试:sysbench用法详解
- MapReduce中map并行度优化及源码分析
- 20165314 2016-2017-2 《Java程序设计》第7周学习总结
- react 生命周期钩子里不要写逻辑,否则不生效
- zabbix设置中文并解决乱码问题
- Hadoop生态集群hdfs原理(转)
- 【java】注释