您现在的位置是：网站首页> 编程资料编程资料
CSS设置table下tbody的滚动条的实现_CSS教程_CSS_网页制作_
2021-09-10
1310人已围观
简介 这篇文章主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
今天碰到一个关于对tabel的表的滚动事件，需求是表头不动，改变的是tbody，如果tbody里面的内容过多，让其进行滚动事件。
首先想到的就是利用css中overflow-y:scroll; 来进行内容的滚动，但是在处理tabel的display状态时，就将tabel表的布局给打乱了，如果给tabel的父级进行限制，则这个表会进行滚动。。。
在css上设置如下代码就可以了
table tbody { display:block; height:200px; overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 } table tbody::-webkit-scrollbar { display: none; // 隐藏滚动条 } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1em ) } table thead th{ background:#ccc;} 示例:table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。
转载自·威易网CSS教程
| 姓名 | 年龄 | 出生年月 | 手机号码 | 单位 |
|---|---|---|---|---|
| 张三 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴 |
| 张三封 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴与四十大盗 |
| 张小三 | 18 | 1990-9-9 | 13682299090 | 腾讯科技 |
| 张三 | 18 | 1990-9-9 | 13682299090 | 浏阳河就业 |
| 张三疯子 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴 |
| 张三 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴 |
| 张大三 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴 |
| 张三五 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴 |
| 张刘三 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴 |
| 张三 | 18 | 1990-9-9 | 13682299090 | 阿里巴巴 |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相关内容
- 详解为什么设置overflow为hidden可以清除浮动带来的影响_CSS教程_CSS_网页制作_
- css实现动态阴影、蚀刻文本、渐变文本效果_CSS教程_CSS_网页制作_
- 用 CSS background 实现刻度线的呈现_CSS教程_CSS_网页制作_
- 使用纯 CSS 创作一个渐变色动画边框_CSS教程_CSS_网页制作_
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产_CSS教程_CSS_网页制作_
- 纯CSS实现多行文字截断的示例代码_CSS教程_CSS_网页制作_
- CSS实现悬停过渡动画三部曲_CSS教程_CSS_网页制作_
- css3 中实现炫酷的loading效果 _css3_CSS_网页制作_
- css3中用animation的steps属性制作帧动画 _css3_CSS_网页制作_
- CSS实现鼠标移动到图片或按钮上改变大小的方法示例_CSS教程_CSS_网页制作_
