使用 Layui 美化表单 - 表格样式优化

"使用Layui美化表单，需要引入layui的相关样式和脚本文件，并对表格进行一些修改。代码如下：\n\n\n<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css" media="all">\n<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>\n\n<div class="layui-container">\n <table class="layui-table" lay-skin="line">\n <colgroup>\n <col width="40">\n <col width="100">\n <col width="110">\n <col width="120">\n <col width="150">\n <col width="150">\n <col width="120">\n </colgroup>\n <thead>\n <tr>\n <th>ID</th>\n <th>结果</th>\n <th>物品名称</th>\n <th>丢失地点</th>\n <th>丢失时间</th>\n <th>标题</th>\n <th>操作</th>\n </tr>\n </thead>\n <tbody>\n\n <c:forEach items="${list}" var="bean">\n <tr>\n <td align="center">${bean.id}</td>\n <td align="center"><c:if test="${bean.state == 0}">寻找中</c:if><c:if\n test="${bean.state == 1}">已找到</c:if></td>\n <td align="center">${bean.name}</td>\n <td align="center">${bean.address}</td>\n <td align="center"><fmt:formatDate value="${bean.happentime}" pattern="yyyy-MM-dd"/></td>\n <td align="center"><a href="../goods!view?id=${bean.id}" target="_blank">${bean.title}</a></td>\n <td align="center"><a href="method!goodsedit?id=${bean.id}">修改</a> | <a\n href="method!goodsdelete?id=${bean.id}" onclick="return confirm('确定删除')">删除</a></td>\n </tr>\n </c:forEach>\n\n </tbody>\n </table>\n</div>\n\n<script>\n // 初始化layui组件\n layui.use('table', function(){\n var table = layui.table;\n });\n</script>\n\n\n上述代码中，首先在页面的头部引入了layui的样式文件和脚本文件。然后将原来的<div class="table-list">修改为<div class="layui-container">，并将<table>的class属性改为layui-table。最后在页面的底部使用layui.use('table', function(){...})来初始化layui组件。\n