你可以使用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),你需要在服务器端进行处理才能正确显示表格数据

用layui美化表格 div class=table-list table width=100 cellspacing=0 thead tr th

原文地址: https://www.cveoy.top/t/topic/hGbx 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录