用layui美化表单 div class=table-list table width=100 cellspacing=0 thead tr th width=40IDth th width=100结果th t

使用layui美化表单的步骤如下：

1. 引入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>

2. 在表单的外层div上添加layui的class，例如layui-form。

<div class="layui-form table-list">
    <!-- 表单内容 -->
</div>

3. 修改表格的HTML结构，使用layui提供的表格样式。

<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="150">
        <col width="120">
    </colgroup>
    <thead>
        <tr>
            <th>ID</th>
            <th>结果</th>
            <th>物品名称</th>
            <th>丢失地点</th>
            <th>丢失时间</th>
            <th>标题</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!-- 表格内容 -->
    </tbody>
</table>

4. 使用layui的表格样式对表格内容进行美化。

<c:forEach items="${list}" var="bean">
    <tr>
        <td>${bean.id}</td>
        <td><c:if test="${bean.state == 0}">寻找中</c:if><c:if test="${bean.state == 1}">已找到</c:if></td>
        <td>${bean.name}</td>
        <td>${bean.address}</td>
        <td><fmt:formatDate value="${bean.happentime}" pattern="yyyy-MM-dd"/></td>
        <td><a href="../goods!view?id=${bean.id}" target="_blank">${bean.title}</a></td>
        <td><a href="method!goodsedit?id=${bean.id}">修改</a> | <a href="method!goodsdelete?id=${bean.id}" onclick="return confirm('确定删除')">删除</a></td>
    </tr>
</c:forEach>

5. 使用layui的表单组件对表单元素进行美化。

<!-- 示例：美化下拉列表 -->
<td>
    <select class="layui-select">
        <option value="0">寻找中</option>
        <option value="1">已找到</option>
    </select>
</td>

<!-- 示例：美化文本输入框 -->
<td>
    <input type="text" class="layui-input">
</td>

<!-- 示例：美化按钮 -->
<td>
    <button class="layui-btn layui-btn-sm">修改</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
</td>

6. 初始化layui组件。

<script>
    layui.use('form', function(){
        var form = layui.form;
        form.render();
    });
</script>

以上是使用layui美化表单的基本步骤，根据具体需求可以进一步进行样式和功能的定制