Layui中处理表格样式分为静态表格及数据表格,所谓静态表格是指数据固定的表格,而数据表格则是动态获取数据构建的表格,前者主要使用Layui的预设类及属性设置表格样式,而后者则主要调用table模块操作表格。本文主要学习Layui中与静态表格相关的Layui的预设类及属性。
在table元素的class中添加预设类layui-table即可设置Layui风格的静态表格样式,其与普通表格的区别如下图所示:
除此之外,Layui官网教程中主要介绍了lay-even、lay-skin和lay-size等三个基础属性,用于设置表格的隔行背景、边框风格及表格尺寸。
在table元素中增加lay-even,不需要设置值即可启用隔行背景效果(基于layui官方教程中的示例在chrome中测试时没有效果,暂时不清楚怎么回事儿),layui.css中的背景色设置如下所示:
.layui-table[lay-even] tbody tr:nth-child(even){background-color: #f8f8f8;}
lay-skin属性用于设置边框效果,主要包括三个值:line (行边框风格)、row (列边框风格)、nob (无边框风格),其效果如下图所示(边框颜色较淡,需要仔细看才行):
lay-size属性设置表格的尺寸,主要包括两个值:sm (小尺寸)、lg (大尺寸),其效果如下图所示:
layui.css中与layui-table相关的预设类还有不少,后续还会继续学习。
参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://blog.csdn.net/kids_fan/article/details/121808612