当前位置:主页 > javascript教程 > 解决layui表格的表头不滚动的问题

关于layui表格的表头不滚动的实例详解

发布:2020-01-11 18:29:37 87


我们帮大家精选了layui表格表头不滚动相关的编程文章,网友容景龙根据主题投稿了本篇教程内容,涉及到layui表格、表头不滚动、js、解决layui表格的表头不滚动的问题相关内容,已被587网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

解决layui表格的表头不滚动的问题

步奏:

1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;

2、第二个table需要一个div包住,并设置宽高,可用绝对布局

3、tr下的th和td需要设置相同的宽度

实例:

html:

<html>
 <head></head>
 <body>
 <div id="righttable" > 
  <table class="layui-table" border="1" > 
  <thead id="thead_"> 
   <tr>
   <th>站点名称</th>
   <th>站点排名</th>
   <th>站点电量(kWh)</th>
   </tr> 
  </thead> 
  </table> 
  <div > 
  <table class="layui-table" border="1" > 
   <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获取选中行数据的代码详解

    发布:2019-09-15

    今天小编就为大家分享一篇layui获取选中行数据的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • 在vue项目中使用layui框架的方法及采坑总结

    发布:2019-09-16

    这篇文章主要介绍了vue使用layui框架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • Django layui {{}}冲突的问题解决方案

    发布:2019-09-23

    今天小编就为大家分享一篇解决Django layui {{}}冲突的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • SpringBoot+layui实现文件上传功能的实例讲解

    发布:2019-10-29

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。这篇文章主要介绍了SpringBoot+layui实现文件上传,需要的朋友可以参考下


网友讨论