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

在Z-Blog中运行代码[html][/html]（纯JS版）

Mar 25 Javascript

基于jquery扩展漂亮的CheckBox(自己编写)

Nov 19 Javascript

通过复制Table生成word和excel的javascript代码

Jan 20 Javascript

jQuery源码分析之jQuery.fn.each与jQuery.each用法

Jan 23 Javascript

Bootstrap框架下下拉框select搜索功能

Mar 26 Javascript

JS弹出新窗口被拦截的解决方法

Aug 09 Javascript

利用Mongoose让JSON数据直接插入或更新到MongoDB

May 03 Javascript

微信小程序页面开发注意事项整理

May 18 Javascript

在vscode中统一vue编码风格的方法

Feb 22 Javascript

在create-react-app中使用css modules的示例代码

Jul 31 Javascript

jQuery添加新内容的四个常用方法分析【append，prepend，after，before】

Mar 19 jQuery

解决vue 使用axios.all()方法发起多个请求控制台报错的问题

Nov 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

php单文件版在线代码编辑器

2015/03/12 PHP

Windows下编译PHP5.4和xdebug全记录

2015/04/03 PHP

PHP中的print_r 与 var_dump 输出数组

2016/06/13 PHP

php 基础函数

2017/02/10 PHP

一个简单的JavaScript数据缓存系统实现代码

2010/10/24 Javascript

实例分析javascript中的call()和apply()方法

2014/11/28 Javascript

jquery果冻抖动效果实现方法

2015/01/15 Javascript

Javascript实现颜色rgb与16进制转换的方法

2015/04/18 Javascript

jquery分析文本里url或邮件地址为真实链接的方法

2015/06/20 Javascript

实例讲解js验证表单项是否为空的方法

2016/01/09 Javascript

把json格式的字符串转换成javascript对象或数组的方法总结

2016/11/03 Javascript

js定时器+简单的动画效果实例

2017/11/10 Javascript

Angular异步变同步处理方法

2018/08/13 Javascript

vue-cli脚手架build目录下utils.js工具配置文件详解

2018/09/14 Javascript

JS实现从对象获取对象中单个键值的方法示例

2019/06/05 Javascript

原生js实现二级联动菜单

2019/11/27 Javascript

解决vue的touchStart事件及click事件冲突问题

2020/07/21 Javascript

[05:26]TI10典藏宝瓶套装外观展示

2020/07/03 DOTA

python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)

2014/08/25 Python

在Python上基于Markov链生成伪随机文本的教程

2015/04/17 Python

pandas DataFrame 根据多列的值做判断,生成新的列值实例

2018/05/18 Python

基于python OpenCV实现动态人脸检测

2018/05/25 Python

浅谈Pandas 排序之后索引的问题

2018/06/07 Python

在Python中Dataframe通过print输出多行时显示省略号的实例

2018/12/22 Python

python 判断linux进程,并杀死进程的实现方法

2019/07/01 Python

python opencv如何实现图片绘制

2020/01/19 Python

Python生成器传参数及返回值原理解析

2020/07/22 Python

H5新属性audio音频和video视频的控制详解（推荐）

2016/12/09 HTML / CSS

Bench加拿大官方网站：英国城市服装品牌

2017/11/03 全球购物

亚洲最大的眼镜批发商和零售商之一：Glasseslit

2018/10/08 全球购物

酒会邀请函

2015/01/31 职场文书

开学第一天的感想

2015/08/10 职场文书

如何书写民事调解协议书？

2019/06/25 职场文书

导游词之天下银坑景区

2019/11/21 职场文书

NodeJs内存占用过高的排查实战记录

2021/05/10 NodeJs

Java tomcat手动配置servlet详解

2021/11/27 Java/Android