网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

利用layui,生成简洁,漂亮的Table表格

时间:2024-11-13 21:28:30

1、首先我们需要下载layui相关的文件,并把样式文件引入到自己的页面里。

利用layui,生成简洁,漂亮的Table表格

2、然后在html里输入一个table的数据,如图

利用layui,生成简洁,漂亮的Table表格

3、先运行页面,在默认下,这个table显示得比较粗糙,难看。

利用layui,生成简洁,漂亮的Table表格

4、我们不需要做其他额外的工作,就添加一句代码,class="layui-table",即为table添加一个layui-table的样式,就可以让我们的表格很漂亮,美观了。

利用layui,生成简洁,漂亮的Table表格

5、看下的效果,可以看到表格很漂亮了吧,我们并不需要自己写多复杂的样式就达到这个界面了。

利用layui,生成简洁,漂亮的Table表格

6、如果我们需要一个紧凑一点的表格,也很简单,添加一个lay-size属性就行了,值设置为'sm',

利用layui,生成简洁,漂亮的Table表格

7、再看下页面,现在显示的是一个紧凑,漂亮的表格。

利用layui,生成简洁,漂亮的Table表格
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com