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;}

CSS设置table下tbody的滚动条相关推荐

table下tbody滚动条与thead对齐的方法且每一列可以不均等
1 前言 table下tbody滚动条与thead对齐的方法,开始在tbody的td和thead的tr>td,对每一个Item加入百分比,结果是没对齐.也尝试了用bootstrap的col-md ...
css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
[转载]Css设置table网格线(无重复）
原文地址:Css设置table网格线(无重复)作者:依然贰零零柒效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transition ...
html 滚动条置顶,css怎么设置网页下拉条（滚动条）样式？
很多朋友在网页设计中要自定义下拉条(滚动条)样式的情景,下拉条的样式我们可以通过css来控制的,下拉条能不能换颜色或者做的更好看一些呢?那么滚动条的设置都有哪些呢?下面本篇文章来介绍一下设置下拉条(滚 ...
用CSS设置Table的细边框的最好用的方法
http://www.cnblogs.com/xinlei/archive/2010/06/23/1763387.html 通过差一些资料http://blog.sina.com.cn/s/blog_ ...
html+css+js 自定义下拉框+滚动条
转摘自:https://www.cnblogs.com/zhuxinghan/p/6853872.html 有时,浏览器默认的滚动条不能满足需求,我们要实现自定义的滚动条.借助于鼠标移动事件和滚轮事件 ...
html表格边框仅一条线,css 设置table边线为一条线
table { border-collapse:collapse; } 很简单定义和用法 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. 只有当这个值不是 ...
css 设置table样式
<style type="text/css" > table tr td{height:39px; font-size: 13px; line-height ...

CSS设置table下tbody的滚动条

CSS设置table下tbody的滚动条相关推荐

最新文章

热门文章