首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

解决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表格的表头不滚动的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

知了还没睡

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
javascript 用函数实现继承详解
May 28 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
webpack下实现动态引入文件方法
Feb 22 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
vue element 中的table动态渲染实现（动态表头）
Nov 21 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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
exists(2) REST(1) Spring Bean(1) 远程桌面(2) 慢日志(1) Spring JPA(1) cmd(1) openEuler(1) EditText(1) Switch(1)
You might like
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
Bootstrap每天必学之按钮（一）
2015/11/24 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python编写登陆接口的方法
2017/07/10 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
scrapy头部修改的方法详解
2020/12/06 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
Arti-shopping中文官网：大型海外商品一站式直邮平台
2020/03/23 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
违反学校规定检讨书
2014/01/18 职场文书
采购助理岗位职责
2014/02/16 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书