解决layui表格的表头不滚动的问题
更新时间：2019年09月04日 15:03:57 作者：知了还没睡
今天小编就为大家分享一篇解决layui表格的表头不滚动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
步奏：
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表格的表头不滚动的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
这篇文章主要介绍了Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了chrome监听cookie变化与赋值问题,cookie监听与赋值操作需要manifest文件里声明权限问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
JavaScript改变HTML元素的样式改变CSS及元素属性
改变CSS及元素属性的方法有很多，在本文将为大家介绍下使用js是如何做到的，感兴趣的朋友可以感受下2013-11-11
这篇文章主要为大家详细介绍了JavaScript canvas仿代码流瀑布，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了URL中“#” “？” &“”号的作用浅析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了momentjs详细使用说明,使用 Moment.js 可以轻松地获取上周、上月和前三个月的起始和结束时间，在示例中，我们传入了 '2023-07-15'，并将返回的日期信息存储在 dateInfo 变量中，然后将其打印到控制台上，需要的朋友可以参考下2023-07-07
本文给大家分享一段js代码实现自动切换图片的代码，代码非常简单，应用领域非常广泛，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了js自定义鼠标右键的实现原理及源码,需要的朋友可以参考下2014-06-06
页面中实现setInterval和setTimeout效果示例详解
这篇文章主要为大家介绍了不使用setTimeout和setInterval在页面中实现setInterval和setTimeout效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章将给大家详细介绍一下JavaScript实现模块的拖拽功能的代码示例，文中有详细的实现步骤,需要的朋友可以参考下2023-07-07
最新评论