首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:10:33 385

layui是一个前端框架,利用它我们可以减少很多前端的工作,就能生成漂亮的界面,下面以table表格为例子,来生成一个简洁,漂亮的表格。JlY办公区 - 实用经验教程分享!

方法/步骤

  • 1

    首先我们需要下载layui相关的文件,并把样式文件引入到自己的页面里。JlY办公区 - 实用经验教程分享!

    利用layui,生成简洁,漂亮的Table表格JlY办公区 - 实用经验教程分享!

  • 1该信息未经授权抓取自百度经验
  • 2

    然后在html里输入一个table的数据,如图JlY办公区 - 实用经验教程分享!

    利用layui,生成简洁,漂亮的Table表格JlY办公区 - 实用经验教程分享!

  • 3

    先运行页面,在默认下,这个table显示得比较粗糙,难看。JlY办公区 - 实用经验教程分享!

    利用layui,生成简洁,漂亮的Table表格JlY办公区 - 实用经验教程分享!

  • 4

    我们不需要做其他额外的工作,就添加一句代码,class="layui-table",即为table添加一个layui-table的样式,就可以让我们的表格很漂亮,美观了。JlY办公区 - 实用经验教程分享!

    利用layui,生成简洁,漂亮的Table表格JlY办公区 - 实用经验教程分享!

  • 5

    看下的效果,可以看到表格很漂亮了吧,我们并不需要自己写多复杂的样式就达到这个界面了。JlY办公区 - 实用经验教程分享!

    利用layui,生成简洁,漂亮的Table表格JlY办公区 - 实用经验教程分享!

  • 6

    如果我们需要一个紧凑一点的表格,也很简单,添加一个lay-size属性就行了,值设置为'sm',JlY办公区 - 实用经验教程分享!

    利用layui,生成简洁,漂亮的Table表格JlY办公区 - 实用经验教程分享!

  • 7

    再看下页面,现在显示的是一个紧凑,漂亮的表格。JlY办公区 - 实用经验教程分享!

    利用layui,生成简洁,漂亮的Table表格JlY办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!JlY办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码