解决layui表格的表头不滚动的问题


Posted in Javascript onSeptember 04, 2019

步奏:

1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;

2、第二个table需要一个div包住,并设置宽高,可用绝对布局

3、tr下的th和td需要设置相同的宽度

实例:

html:

<html>
 <head></head>
 <body>
 <div id="righttable" style="width:100%;height:70%;padding-bottom: 2px;position:relative;"> 
  <table class="layui-table" border="1" style="width: 100%;border:1px solid #ddd;"> 
  <thead id="thead_"> 
   <tr>
   <th>站点名称</th>
   <th>站点排名</th>
   <th>站点电量(kWh)</th>
   </tr> 
  </thead> 
  </table> 
  <div style="position:absolute;bottom:2px;top:31px;overflow-y:scroll;width:100%"> 
  <table class="layui-table" border="1" style="width: 100%;border:1px solid #ddd;"> 
   <tbody id="tbody_"> 
   </tbody> 
  </table> 
  </div> 
 </div>
 </body>
</html>

css:

.layui-table tr th,td{white-space:nowrap;padding:5px;text-align:center;width:33.4%;}

以上这篇解决layui表格的表头不滚动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 #Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 #Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 #Javascript
深入浅出vue图片路径的实现
Sep 04 #Javascript
webpack 如何解析代码模块路径的实现
Sep 04 #Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 #Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 #Javascript
You might like
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
2021年最新CPU天梯图
2021/03/04 数码科技
php xml实例 留言本
2009/03/20 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
浅谈Javascript事件模拟
2012/06/27 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
详解Python中的条件判断语句
2015/05/14 Python
深入浅析python with语句简介
2018/04/11 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
旅游个人求职信范文
2014/01/30 职场文书
大专会计自我鉴定
2014/02/06 职场文书
三查三看党性分析材料
2014/02/18 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
党员对照检查材料
2014/09/22 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
领导干部失职检讨书
2015/05/05 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Python实现打乒乓小游戏
2021/09/25 Python