layui表格的表头不滚动

最新推荐文章于 2024-05-06 08:25:56 发布
最新推荐文章于 2024-05-06 08:25:56 发布
阅读量1.4w 收藏 1
点赞数 1
分类专栏： layui 文章标签： table layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36784628/article/details/82346592
版权

步奏：

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%;}

 

知了还没睡
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决layui表格的表头不滚动的问题
10-16
今天小编就为大家分享一篇解决layui表格的表头不滚动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Layui表格需表头固定悬浮的问题
撒野
06-30 1万+
当表格过长，表头离开页面可视范围时把表头固定悬浮在上面，如下: 思路：问题的关键是如何知道表头是否超出可视范围，首先我们需要知道表头到文档顶部的距离，这个距离是不会变的（除非操控DOM）,然后监听滚动条滚动的距离。如果前者减去后者小于0，则表示离开了可视范围。 先在Layui表格渲染完成的回调函数里写： done: function () {//表格渲染完成的回调函数 var headertop = $(".layui-table-header").offset().to
layui table 多级表头的使用
在原七海的博客
05-06 1227
layui table 多级表头的使用教程与示例
layui表头跟随滚动条滑动_侧边栏实现随滚动条滑动固定的效果
weixin_35219046的博客
12-23 1491
最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的)，还有适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。效果一：...
LayUI根据页面大小 页数沾住 , 页面滚动 搜索 和表头 不动
weixin_42136237的博客
04-04 438
{extend name="base" /} {block name="title"}工作计划{/block} {block name="body"} .toolbar .layui-inline { height: 38px; width: 260px; float: left; } .toolbar .layui-inline .layui-input-inline { width: 150px
layui 表格不出现横向滚动条
dssxyz的博客
06-16 4367
用的ace admin框架，layui 静态表格，没有出现横向滚动条：
layui table横向滚动条不起作用原因
m0_59673430的博客
11-18 1347
layui table横向滚动条不起作用原因
解决layui数据表格table的横向滚动条显示问题
10-16
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui表格选中指定行的radio单选框并滚动到该行的实现代码
12-28
layui table有多行数据，通过外部输入内容，需要定位到指定行，选中改行，对改行进行操作。 实现效果： HTML代码： <body> <div class=layui-fluid> <input type=text id=txt_id /> <table class=...
Layui的树形表格treeTable
06-20
在Layui中，树形表格（treeTable）是一种非常实用的功能，它将传统的表格与树状结构相结合，适用于展示具有层级关系的数据，如部门结构、文件目录等。下面我们将深入探讨Layui的treeTable，以及如何实现无限层级的树...
layui table的使用方法以及基本操作
热门推荐
jinggaoniao的博客
07-28 2万+
layui table用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。(本段话来源于layui官网) 一、基本使用方法 layui table的使用方法很简单，可以总结为三个步骤：绑定容器、设置数据接口、在表头设定对应的字段 以下表格即是一个简单数据表格最基本的样子 对应
layui table 复杂表头设计及固定表头、单元格内容相同自动合并、合计去除小数点
曉儂
12-07 1396
layui table 复杂表头设计及固定表头、单元格内容相同自动合并、合计去除小数点
Layui表格固定列不能滚动问题，亲测可用
qq_35178953的博客
07-13 2349
css: .layui-table-fixed .layui-table-body::-webkit-scrollbar {display:none} .layui-table-fixed .layui-table-body:hover{overflow-y: auto;} JS: $(".layui-table-fixed-l .layui-table-body").hover(function () { $(".layui-table-fixed-l .layui-table-
el-table显示滚动条，但表头固定（解决方法）
weixin_38345306的博客
03-07 5928
el-table显示滚动条，但表头固定（解决方法）
layui表格的表头不滚动(表头冻结)
weixin_43702272的博客
04-13 243
步奏： 1、设置两个table，第一个table有thead没有tbody，第二个table有tbody没有table； 2、第二个table需要一个div包住，并设置宽高，可用绝对布局 3、tr下的th和td需要设置相同的宽度 Ps:你品，你细品！！！ 实例： html： <html> <head></head> <body> <d...
layui动态固定表格表头
岁月如歌去，十年弹指间
05-07 1717
.table-sticky-head .layui-table tbody{ height: calc(100vh - 325px); display: block; overflow-y: scroll; overflow-x: scroll; width: 100vw; } .table-sticky-head .layui-table tbody::-webkit-scrollbar { display: none; } .table-sticky-he..
固定表头和固定列表格解决方案
xsh的博客
03-30 1230
框架 Bootstrap4.1.3、jquery-1.11.0 版本一 使用layui的数据表格。 优点：基本上可以完成项目开始要求，快速开发。可以满足拖动列 缺点：（1）但随着客户提的页面功能越来，layui的数据表格不能满足，在回调中做了大量的处理，导致项目变得复杂 （2）有些功能还存在bug （3）表格内特别是单元格内嵌套的元素太多，如果表格内的列太多的话，一页展示100条就出现卡顿了，客户体验很不好 （4）必须是得分页，不能流加载。 客户要求必须一页全部展示处理，不想看到分页栏，说他们不习惯，然后老
layui.table单元格编辑增加textarea输入
Shelly Long的博客
04-28 4419
需求：由于表格编辑不能换行，传到后台的数据是一行数据，故需将编辑的input框改为可选的textarea 首先写样式 注：CSS 可根据自己的需求改 <style> textarea.layui-textarea.layui-table-edit { min-width: 500px; min-height: 300px; z-index: 2; } </style&gt...
layui表格 表头加粗
最新发布
06-06
layui是一个轻量级的前端UI库，它提供了丰富的表格组件，其中包括对表头样式定制的功能。要在layui表格中将表头加粗，你可以使用`layui.table`的`head/style`属性，设置`fontWeight`为`bold`或`"bold"`，如下所示： ```html <script src="layui/layui.js"></script> <style> table.layui-table th { font-weight: bold; /* 如果layui没有提供全局重置，可以在这里直接设置 */ } </style> <!-- 初始化表格 --> <table id="Demo" lay-filter="demo" lay-data="data"> <thead> <tr> <th>标题1</th> <th>标题2</th> <!-- ... --> </tr> </thead> </table> <script> layui.use('table', function(){ layui.table.render({ elem: '#Demo', // 表格容器ID data: [], // 表格数据 cols: [[// 列配置 {field: 'title1', title: '标题1', align: 'center', width: 100, headStyle: {fontWeight: 'bold'}}, // 加粗标题1 {field: 'title2', title: '标题2', align: 'center', width: 100}, ... ]], ... }); }); </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值