用layui美化表格 div class=table-list table width=100 cellspacing=0 thead tr th
你可以使用layui来美化表格。首先,你需要引入layui的CSS和JS文件。然后,将表格的class属性设置为layui-table,加上lay-size属性来定义表格的大小。最后,你可以使用layui的其他样式类来美化表格的各个部分。
下面是使用layui美化表格的示例代码:
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<div class="layui-form">
<table class="layui-table" lay-size="sm">
<colgroup>
<col width="40">
<col width="100">
<col width="110">
<col width="120">
<col width="150">
<col width="120">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>用户组</th>
<th>邮箱</th>
<th>注册时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 使用循环生成表格内容 -->
<c:forEach items="${list}" var="bean">
<tr>
<td align="center">${bean.id}</td>
<td align="center">${bean.username}</td>
<td align="center">
<c:if test="${bean.role == 0}">用户</c:if>
<c:if test="${bean.role == 1}">管理员</c:if>
</td>
<td align="center">${bean.email}</td>
<td align="center"><fmt:formatDate value="${bean.createtime}" pattern="yyyy-MM-dd"/></td>
<td align="center">
<a href="method!useredit?id=${bean.id}">查看</a> |
<a href="method!userdelete?id=${bean.id}" onclick="return confirm('删除用户同时会删除该用户相关的所有数据');">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script>
layui.use('table', function() {
var table = layui.table;
//执行渲染
table.render();
});
</script>
请注意,上述代码中使用了JSP的标签和表达式语言(EL),你需要在服务器端进行处理才能正确显示表格数据
原文地址: https://www.cveoy.top/t/topic/hGbx 著作权归作者所有。请勿转载和采集!