编程 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 相关文章推荐

js中将字符串转换成json的三种方式

Jan 12 Javascript

js去除输入框中所有的空格和禁止输入空格的方法

Jun 09 Javascript

Node.js的特点和应用场景介绍

Nov 04 Javascript

dreamweaver 8实现Jquery自动提示

Dec 04 Javascript

AngularJS的表单使用详解

Jun 17 Javascript

原生javascript实现分享到朋友圈功能支持ios和android

May 11 Javascript

改变checkbox默认选中状态及取值的实现代码

May 26 Javascript

vue下拉菜单组件（含搜索）的实现代码

Nov 25 Javascript

vue的.vue文件是怎么run起来的(vue-loader)

Dec 10 Javascript

详解Element 指令clickoutside源码分析

Feb 15 Javascript

实现elementUI表单的全局验证的方法步骤

Apr 29 Javascript

vue实现表单未编辑或未保存离开弹窗提示功能

Apr 08 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

一些常用的php简单命令代码集锦

2007/09/24 PHP

特详细的PHPMYADMIN简明安装教程

2008/08/01 PHP

PHP 读取文件的正确方法

2009/04/29 PHP

Apache服务器无法使用的解决方法

2013/05/08 PHP

php导入导出excel实例

2013/10/25 PHP

PHP开发微信支付的代码分享

2014/05/25 PHP

thinkphp3.x中session方法的用法分析

2016/05/20 PHP

Laravel构建即时应用的一种实现方法详解

2017/08/31 PHP

Laravel学习笔记之Artisan命令生成自定义模板的方法

2018/11/22 PHP

ajax 同步请求和异步请求的差异分析

2011/07/04 Javascript

gridpanel动态加载数据的实例代码

2013/07/18 Javascript

js实现div闪烁原理及实现代码

2014/06/24 Javascript

javascript学习笔记（七）Ajax和Http状态码

2014/10/08 Javascript

实例解析JS布尔对象的toString()方法和valueOf()方法

2015/10/25 Javascript

jQuery中inArray方法注意事项分析

2016/01/25 Javascript

jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】

2016/11/09 Javascript

Angular2-primeNG文件上传模块FileUpload使用详解

2017/01/14 Javascript

React操作真实DOM实现动态吸底部的示例

2017/10/23 Javascript

JavaScript实现元素滚动条到达一定位置循环追加内容

2017/12/28 Javascript

jQuery实现为table表格动态添加或删除tr功能示例

2019/02/19 jQuery

微信小程序官方动态自定义底部tabBar的例子

2019/09/04 Javascript

vue视频播放插件vue-video-player的具体使用方法

2019/11/08 Javascript

Vue切换Tab动态渲染组件的操作

2020/09/21 Javascript

angular共享依赖的解决方案分享

2020/10/15 Javascript

[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12

2020/12/16 DOTA

详解Python中expandtabs()方法的使用

2015/05/18 Python

Django实现全文检索的方法(支持中文)

2018/05/14 Python

Python实现点阵字体读取与转换的方法

2019/01/29 Python

在PyCharm中安装PaddlePaddle的方法

2021/02/05 Python

Bodum官网：咖啡和茶壶、玻璃器皿、厨房电器等

2018/08/01 全球购物

什么是网络协议

2016/04/07 面试题

求职者简历中的自我评价

2013/10/20 职场文书

幼师自荐信

2013/10/26 职场文书

地方白酒代理协议书

2014/10/25 职场文书

2015年师德师风承诺书

2015/01/22 职场文书

志愿者服务活动总结报告

2015/05/06 职场文书