您现在的位置是：网站首页> 编程资料编程资料

CSS设置table下tbody的滚动条的实现_CSS教程_CSS_网页制作_

2023-11-04 215人已围观

简介 这篇文章主要介绍了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教程
姓名年龄出生年月手机号码单位
张三181990-9-913682299090阿里巴巴
张三封181990-9-913682299090阿里巴巴与四十大盗
张小三181990-9-913682299090腾讯科技
张三181990-9-913682299090浏阳河就业
张三疯子181990-9-913682299090阿里巴巴
张三181990-9-913682299090阿里巴巴
张大三181990-9-913682299090阿里巴巴
张三五181990-9-913682299090阿里巴巴
张刘三181990-9-913682299090阿里巴巴
张三181990-9-913682299090阿里巴巴

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：天天飞车新车福特新福克斯多少钱_手机游戏_游戏攻略_

下一篇：详解flex实现左右布局中按钮溢出隐藏效果_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网