编程 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的一点点认识总结《javascript高级程序设计》读书笔记

Nov 30 Javascript

jquery中插件实现自动添加用户的具体代码

Nov 15 Javascript

Javascript进制转换实例分析

May 14 Javascript

Node.js编写爬虫的基本思路及抓取百度图片的实例分享

Mar 12 Javascript

js实现图片切换（动画版）

Dec 25 Javascript

jQuery密码强度验证控件使用详解

Jan 05 Javascript

js控制一个按钮是否可点击(可使用)disabled的实例

Feb 14 Javascript

vue2 前端搜索实现示例

Feb 26 Javascript

vue下拉菜单组件（含搜索）的实现代码

Nov 25 Javascript

Vue 3.0 全家桶抢先体验

Apr 28 Javascript

在react中使用vue的状态管理的方法示例

May 02 Javascript

arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)

Jan 28 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

解析php5配置使用pdo

2013/07/03 PHP

js完美解决IE6不支持position:fixed的bug

2015/04/24 Javascript

Jquery 分页插件之Jquery Pagination

2015/08/25 Javascript

jQuery定义插件的方法

2015/12/18 Javascript

JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

2016/02/26 Javascript

JS跨域解决方案之使用CORS实现跨域

2016/04/14 Javascript

浅析Javascript ES6中的原生Promise

2016/08/25 Javascript

Vue表单实例代码

2016/09/05 Javascript

详解Angular的内置过滤器和自定义过滤器【推荐】

2016/12/26 Javascript

js canvas实现擦除效果示例代码

2017/04/26 Javascript

React-router中结合webpack实现按需加载实例

2017/05/25 Javascript

浅谈angular2 组件的生命周期钩子

2017/08/12 Javascript

vue params、query传参使用详解

2017/09/12 Javascript

angular6.0使用教程之父组件通过url传递id给子组件的方法

2018/06/30 Javascript

详解ES6 系列之异步处理实战

2018/10/26 Javascript

jQuery利用FormData上传文件实现批量上传

2018/12/04 jQuery

详解vue-router导航守卫

2019/01/19 Javascript

Nodejs核心模块之net和http的使用详解

2019/04/02 NodeJs

Vue 嵌套路由使用总结（推荐）

2020/01/13 Javascript

简单了解JavaScript弹窗实现代码

2020/05/07 Javascript

Vue实现图片轮播组件思路及实例解析

2020/05/11 Javascript

vue中watch和computed的区别与使用方法

2020/08/23 Javascript

swiper自定义分页器的样式

2020/09/14 Javascript

[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访

2014/07/10 DOTA

[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator

2018/08/13 DOTA

ssh批量登录并执行命令的python实现代码

2012/05/25 Python

Python中正则表达式的详细教程

2015/04/30 Python

Python多线程经典问题之乘客做公交车算法实例

2017/03/22 Python

对python周期性定时器的示例详解

2019/02/19 Python

python自定义时钟类、定时任务类

2021/02/22 Python

python 列表推导和生成器表达式的使用

2021/02/01 Python

css3背景_动力节点Java学院整理

2017/07/11 HTML / CSS

是什么让J2EE适合用来开发多层的分布式的应用

2015/01/16 面试题

仓库理货员岗位职责

2013/12/18 职场文书

《狮子和兔子》教学反思

2014/03/02 职场文书

2016中学教师读书心得体会

2016/01/13 职场文书