layui表格边框_layui怎么固定表格的表头
layui固定表格表头的方法：首先找到layui中的table.js文件；然后在变量table中加入fiexdRowHeight属性；最后添加代码为“if(Object.prototype.toString.call(...))”即可。
推荐：《layUI教程》
实现效果:表头和底部分页固定，鼠标滚动只会滚顶body中数据。效果如下：
1、找到layui中的table.js文件，在变量table中加入属性，如图红框中内容：
fiexdRowHeight：是否开启固定行高，默认是false
fiexdRowHeight_rows：表格中显示条数，默认是10条
以上两个参数都可以通过自己传入参数值
2、找到pullData函数：
在此函数中ajax异步请求成功回调的success函数中最后添加如下代码：//固定行高、表头处理
if(Object.prototype.toString.call(options.fiexdRowHeight).slice(8, -1) === 'Boolean' && options.fiexdRowHeight) {
var p_ = $("[lay-id='" + options.id + "']")
var tr_len = p_.find(ELEM_MAIN).find("tr").length
if(tr_len > 10){
if(Object.prototype.toString.call(options.fiexdRowHeight_rows).slice(8, -1) !== 'Number') {
options.fiexdRowHeight_rows = 10
}
var height_main = (options.fiexdRowHeight_rows * 39) + 'px'
var height_fixed = (options.fiexdRowHeight_rows * 39) + 'px'
//如果出现横向滚动条时
if(p_[0].parentNode.clientWidth < document.getElementsByClassName('layui-table-main')[0].getElementsByClassName('layui-table')[0].clientWidth) {
height_main = ((options.fiexdRowHeight_rows * 39) + 18) + 'px'
}
p_.find(ELEM_MAIN).css("height", height_main);
p_.find(ELEM_FIXL).find(ELEM_BODY).css("height", height_fixed);
p_.find(ELEM_FIXR).find(ELEM_BODY).css("height", height_fixed);
}else {
p_.find(ELEM_MAIN).css("height", "auto");
p_.find(ELEM_FIXL).find(ELEM_BODY).css("height", "auto");
p_.find(ELEM_FIXR).find(ELEM_BODY).css("height", "auto");
}
}
3、应用：如图：
layui表格边框_layui怎么固定表格的表头相关推荐
- CSS设置原生table表格边框样式（添加表格横线）（附最后表格td画斜线）
table表格边框样式: 推荐这种 原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
- html表格边框美化,CSS美化表格边框汇总与效果
用css美化表格边框1 2 3 4 5 6 7 8 9 ...
- html表格边框默认值,CSS 表格属性
表格属性 CSS表格属性用于设置HTML表格的样式,HTML表格由 标签嵌套,,等标签组成,一个HTML表格默认至少包含table,tbody,tr,td四个元素. CSS表格属性: border-c ...
- html表格边框为void,将表格边框设置为THICK(Setting Table borders to THICK)
将表格边框设置为THICK(Setting Table borders to THICK) 我想创建一个厚边框的表格. 我一直在寻找一段时间,但似乎THICK风格不起作用. 如果我选择其他样式,例如D ...
- html表格边框void,绘制HTML表格边框
我想画我的表格的边框HTML页面上:绘制HTML表格边框 HTML: Dimension in CM Weight in KG Volume (x6) Pallet (x6) Master (x6) ...
- php中设置table表格边框大小,有关HTML表格边框的设置小技巧
下面小编就为大家带来一篇有关HTML表格边框的设置小技巧.小编觉得挺不错的,现在分享给大家,也给大家做个参考 对于很多初学HTML的人来说,表格 一般我们用表格的时候总会给它个border属性,比如: ...
- php如何设置表格边框颜色代码,html表格边框颜色怎么设置_WEB前端开发
ps中返回上一步快捷键是什么_WEB前端开发 ps中返回上一步快捷键是Ctrl+Z.Ctrl+Z意思为撤销,即可以实现返回上一步的效果,Ctrl+Z快捷键可用在大部分软件中,不仅仅是ps. table ...
- layui表格有边框_layui前端框架表格如何进行屏幕适配
匿名用户 1级 2017-07-03 回答 标签:js代码 .com 效果 click .text jquer 参考 定义 html 项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹 ...
- html表格边框默认值,table表格边框的设置
border-collapse 属性设置table的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示. border-collapse值 separate: 默认值.边框会被分 ...
- 网页中设定表格边框的厚度的属性_补充一点前端知识
近期学习Python的selenium时,发现牵扯到前端的一些知识,好吧,那就先看前端吧 一.HTML网页的基本结构 1.什么是HTML语言: HTML语言指的是超文本标记语言,使用一套固定的标记标签 ...
最新文章
- RunTime运行时在iOS中的应用之UITextField占位符placeholder
- [独库骑行之我们路过沙漠]塔克拉玛干的边缘
- worth,worthy,worthwhile的区别(一)
- hive 两个没有null指定的表左关联的结果有null_Hive的优化原则
- Mybatis源码阅读（五 ）：接口层——SqlSession
- 为什么NTFS删除超过4G大文件或数据库文件后FILE RECORD大小表现为0
- 一篇搞懂Android View
- TypeScript完全解读(26课时)_2.TypeScript完全解读-基础类型
- 2.高性能MySQL --- MySQL 基准测试
- rocketmq底层通信模块解析
- 在Win2000和XP中更换身份不必非要注销
- 飞机大战一Java课程设计
- python语义分析_NLPIR语义分析系统——文本分析利器
- html jquery隐藏input,JQuery控制input的隐藏和显示
- python图片logo_Python logo
- vue实现连接打印机功能
- 使用Qt合并图片的算法
- 博客2.0时代——读者的赞赏，才是原创的动力
- 美通企业日报 | 科技和能源行业最受中国公众信任；英特尔携手大华发展智能视觉技术...
- 2023CUPT第七题 法拉第波 思路和解法