脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layui表格的表头不滚动

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

您可能感兴趣的文章:

相关文章

  • 异步动态加载js与css文件的js代码

    异步动态加载js与css文件的js代码

    这篇文章介绍了异步动态加载js与css文件的几种方法，有需要的朋友可以参考一下
    2013-09-09
  • JavaScript面向对象继承原理与实现方法分析

    JavaScript面向对象继承原理与实现方法分析

    这篇文章主要介绍了JavaScript面向对象继承原理与实现方法,结合实例形式分析就面向对象程序设计中原形、对象、继承的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2018-08-08
  • vscode工具函数idGenerator使用深度解析

    vscode工具函数idGenerator使用深度解析

    这篇文章主要为大家介绍了vscode工具函数idGenerator使用深度解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器，需要的朋友可以参考下。希望对大家有所帮助
    2014-02-02
  • JavaScript访问本地文件夹的几种实现方法

    JavaScript访问本地文件夹的几种实现方法

    由于安全限制无法直接访问用户的本地文件或文件夹,本文主要介绍了JavaScript访问本地文件夹的几种实现方法,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • javascript中CheckBox全选终极方案

    javascript中CheckBox全选终极方案

    在javascript页面中实现CheckBox或者Radio的选中状态是一件很容易的事情，下面我们来给大家展示下在asp.net中使用javascript中CheckBox全选终极方案，有需要的小伙伴可以参考下。
    2015-05-05
  • JavaScript中变量提升和函数提升的详解

    JavaScript中变量提升和函数提升的详解

    这篇文章主要介绍了JavaScript中变量提升和函数提升的详解，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • js实现按钮颜色渐变动画效果

    js实现按钮颜色渐变动画效果

    这篇文章主要介绍了js实现按钮颜色渐变动画效果的方法,涉及javascript鼠标事件及页面表单元素样式的动态操作技巧,需要的朋友可以参考下
    2015-08-08
  • 微信小程序录音实现功能并上传(使用node解析接收)

    微信小程序录音实现功能并上传(使用node解析接收)

    在我们的日常开发中经常会遇到录音功能，并上传到服务器，今天小编给大家分享微信小程序录音功能实现并上传录音文件，使用node解析接收,需要的朋友可以参考下
    2020-02-02
  • Javascript中3个需要注意的运算符

    Javascript中3个需要注意的运算符

    这篇文章主要介绍了Javascript中3个需要注意的运算符,这3个运算符的使用有很多需要注意的地方和有意思的地方,需要的朋友可以参考下
    2015-04-04

最新评论