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

赞 (0)

相关推荐

  • 解决layui数据表格table的横向滚动条显示问题

    加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列

  • 解决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-bo

  • 解决layui表格内文本超出隐藏的问题

    只需要更改样式即可 图片: 代码如下 .layui-table-cell{ height:auto; overflow:visible; text-overflow:inherit; 以上这篇解决layui表格内文本超出隐藏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Layui 表格自适应高度的问题

    鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css <style> .layui-table-cell{ display:table-cell; vertical-align: middle; } </style> 成功解决问题,不要在field中添加高度,可以自行设置宽度,这样就可以让表格自适应高度了~! 以上这篇解决Layui 表格自适应高度的问题就是小编分享给大家的全部内容了,

  • 解决layui数据表格排序图标被超出的表头挤出去的问题

    如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了, 效果如下 解决办法就是给图标加定位,过长的时候加上 .show-sort{ position: absolute; right: 7px; top: 5px; } $('.layui-table-header tr th').each(function(i,ths){ $(this).find('span:first').attr('title',$(this).find('span:first').text()); //

  • JS实现table表格固定表头且表头随横向滚动而滚动

    JS实现table表格固定表头且表头随横向滚动而滚动

    先看一张效果图 思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop 5.滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动 当然还有很多可以优化的地方 我只是展示一个小思路 嘿嘿嘿 题外话 为啥用红色表头 因为显眼哇 哈哈 JS代码

  • layui表格内容溢出的解决方法

    引言,我做文章管理的时候,引入的是layui的表格样式,但是里面的内容溢出无法隐藏,后来我采用了往td里面加了个<div></div> 然后设置一下样式就可以了. <table class="layui-table"> <colgroup> <col width="100"> <col width="150"> <col> </colgroup> &l

  • layui表格 列自动适应大小失效的解决方法

    如下所示: 从官网复制的表格,修改成自适应宽度后失效,原因如下: 以上这篇layui表格 列自动适应大小失效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui表格 返回的数据状态异常的解决方法

    最近用到了layui表格组件,结果发现数据返回状态异常 在网上查询了下是因为需要转成固定个格式 然而layui的table默认返回的数据格式为: response: { //定义后端 json 格式,详细参见官方文档 code: 0, msg: "", count: 1000, data: [] } 网上看了有些方法是转成json数据 JSONObject obj=new JSONObject(); //前台通过key值获得对应的value值 obj.put("code&qu

  • 解决layui数据表格Date日期格式的回显Object的问题

    有属性: private Date createtime; 但是回显的时候,显示{ Object object },想要转换成字符串格式显示. layui中显示: 在对应的实体类中添加属性:private String createtimestr; 然后添加对应的set/get方法,但是方法处理的是createtime 但是在Mybatis-plus框架映射时,数据库表里面又没有该字段,获取数据的时候会报异常,unknown field "createtimestr" in table

随机推荐