解决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 相关文章推荐
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JS中的BOM应用
Feb 02 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
解决Layui中layer报错的问题
Sep 03 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
咖啡的化学
2021/03/03 咖啡文化
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
详解php反序列化
2020/06/10 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
layui select 禁止点击的实现方法
2019/09/05 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中一行和多行import模块问题
2018/04/01 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
英语教学随笔感言
2014/02/20 职场文书
遗嘱继承公证书
2014/04/09 职场文书
消防安全责任书
2014/04/14 职场文书
社区灵活就业证明
2014/11/03 职场文书
趣味运动会加油词
2015/07/18 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers