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

javascript 操作Word和Excel的实现代码

Oct 26 Javascript

解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题

Jan 14 Javascript

按下回车键指向下一个位置的一个函数代码

Mar 10 Javascript

JavaScript实现的图像模糊算法代码分享

Apr 22 Javascript

JavaScript中的getMilliseconds()方法使用详解

Jun 10 Javascript

JavaScript事件代理和委托详解

Apr 08 Javascript

JS判断键盘是否按的回车键并触发指定按钮点击操作的方法

Feb 13 Javascript

原生JS实现图片翻书效果

Feb 16 Javascript

bootstrap table单元格新增行并编辑

May 19 Javascript

微信小程序实现顶部普通选项卡效果(非swiper)

Jun 19 Javascript

基于VUE实现的九宫格抽奖功能

Sep 30 Javascript

vue自定义switch开关组件,实现样式可自行更改

Nov 01 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下判断数组中是否存在相同的值array_unique

2008/03/25 PHP

php 数组排序 array_multisort与uasort的区别

2011/03/24 PHP

php屏蔽错误及提示的方法

2020/05/10 PHP

Javascript 按位与运算符 (&)使用介绍

2014/02/04 Javascript

js实现局部页面打印预览原理及示例代码

2014/07/03 Javascript

JavaScript Math.floor方法(对数值向下取整)

2015/01/09 Javascript

JS实现超炫网页烟花动画效果的方法

2015/03/02 Javascript

自定义百度分享的分享按钮

2015/03/18 Javascript

jquery实现仿新浪微博评论滚动效果

2015/08/06 Javascript

angularjs学习笔记之完整的项目结构

2015/09/26 Javascript

jquery拖拽排序简单实现方法(效果增强版)

2016/02/16 Javascript

基于Bootstrap的UI扩展 StyleBootstrap

2016/06/17 Javascript

BootStrap 实现各种样式的进度条效果

2016/12/07 Javascript

解析ajaxFileUpload 异步上传文件简单使用

2016/12/30 Javascript

Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

2017/02/27 Javascript

React学习之事件绑定的几种方法对比

2017/09/24 Javascript

MUI顶部选项卡的用法(tab-top-webview-main)详解

2017/10/08 Javascript

Vue.js样式动态绑定实现小结

2019/01/24 Javascript

Vue-axios-post数据后端接不到问题解决

2020/01/09 Javascript

vue移动端使用canvas签名的实现

2020/01/15 Javascript

批处理与python代码混合编程的方法

2016/05/19 Python

Python动刷新抢12306火车票的代码(附源码)

2018/01/24 Python

python3+PyQt5+Qt Designer实现堆叠窗口部件

2018/04/20 Python

python使用正则表达式来获取文件名的前缀方法

2018/10/21 Python

python爬虫神器Pyppeteer入门及使用

2019/07/13 Python

python获取全国城市pm2.5、臭氧等空气质量过程解析

2019/10/12 Python

Python-Flask:动态创建表的示例详解

2019/11/22 Python

python小项目之五子棋游戏

2019/12/26 Python

K最近邻算法(KNN)---sklearn+python实现方式

2020/02/24 Python

家庭户外服装：Hawkshead

2017/11/02 全球购物

护士自我评价

2014/02/01 职场文书

体育专业自荐书

2014/05/29 职场文书

办公室文员工作自我鉴定

2014/09/19 职场文书

党的群众路线教育实践活动领导班子整改措施

2014/09/30 职场文书

小学音乐教师个人工作总结

2015/02/05 职场文书

python读取mat文件生成h5文件的实现

2022/07/15 Python