table表头固定只让内容滚动

纯css实现表头固定，只tbody滚动

需要用到粘性固定属性 – position:sticky

position:sticky 用法：默认情况下，其表现为relative，在视窗与设置了该属性的元素之间，达到或超过其预设的 top、bottom、left、right，本属性会转变成 fixed，使 sticky 固定。

html结构：table外面需要包一层div

  <div class="table-box"><table><thead><tr><th class="text-center">序号</th><th class="text-center">名称</th><th class="text-center">电话</th><th class="text-center">备注</th><th class="text-center">录入时间</th></tr></thead><tbody><tr v-for="item in [1,2,3]"><td class="text-center"></td><td class="text-center"></td><td class="text-center"></td><td class="text-center"></td><td class="text-center"></td></tr></tbody></table></div>

css是最关键的，需要分别对table自身和其父便签设置样式

// table父标签: 需要设置固定高度.table-box {height: 500px;overflow-y: auto;border: 1px solid #ddd;} // table表格样式table {width: 100%;table-layout: fixed;thead th {position: sticky;top: -1px;z-index: 10;}}

table表头固定只让内容滚动相关推荐

table表头固定，内容滚动
最近接到一个需求,要thead表头固定,tbody内容实现滚动. 简单,给tbody加高度就行了. 什么?!竟然不行失败了!! 既然无法限制tbody本身的高度,那就给它套一个div,限制div的高度 ...
java 表头固定_BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三星期一星期二星期三星期一星期二星期三星期一星期二星期二星期三星期一 ...
table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
table 表头固定
一.table 表头固定说明.我们将表头和表内容分成两个表格就可以解决该问题. 二.代码. css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来. * {box-sizing: b ...
html table表头说明,HTML table表头固定
HTML table表头固定说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: table tbody { display: block; height: 200px; overflo ...
JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
table表头固定，底部可滚动
需求:实现table表头固定,表体可滚动思路: tbody使用display:block,固定高度,并设置over-y:scroll, thead和tr,使用display:table,使用tabl ...
html5手机表头设置,html Table 表头固定的实现
本文介绍了html table 表头固定的实现,分享给大家,具体如下: 合同号签约客户发布客户合同状态选定条件的发布周期额度看看css *{ padding:0; margin:0; } th{ b ...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...

table表头固定只让内容滚动

纯css实现表头固定，只tbody滚动

需要用到粘性固定属性 – position:sticky

table表头固定只让内容滚动相关推荐

最新文章

热门文章