<p>使用Layui进行美化,需要引入Layui的相关样式和JavaScript文件。</p>
<p>首先,在HTML文件的<head>标签中引入Layui的样式文件和JavaScript文件:</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>然后,在表格外层的<div>标签上添加Layui的class样式:</p>
<pre><code class="language-html">&lt;div class=&quot;layui-table&quot;&gt;
    &lt;table width=&quot;100%&quot; cellspacing=&quot;0&quot;&gt;
        ...
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>
<p>接下来,将表格中的<th>和<td>标签的align属性替换为Layui的class样式:</p>
<pre><code class="language-html">&lt;thead&gt;
    &lt;tr&gt;
        &lt;th class=&quot;layui-table-cell&quot; width=&quot;40&quot;&gt;ID&lt;/th&gt;
        &lt;th class=&quot;layui-table-cell&quot; width=&quot;100&quot;&gt;用户&lt;/th&gt;
        &lt;th class=&quot;layui-table-cell&quot; width=&quot;110&quot;&gt;评论内容&lt;/th&gt;
        &lt;th class=&quot;layui-table-cell&quot; width=&quot;120&quot;&gt;操作&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
    &lt;c:forEach items=&quot;${list}&quot; var=&quot;bean&quot;&gt;
        &lt;tr&gt;
            &lt;td class=&quot;layui-table-cell&quot; align=&quot;center&quot;&gt;${bean.id}&lt;/td&gt;
            &lt;td class=&quot;layui-table-cell&quot; align=&quot;center&quot;&gt;${bean.user.username}&lt;/td&gt;
            &lt;td class=&quot;layui-table-cell&quot; align=&quot;center&quot;&gt;&lt;a href=&quot;../goods!view?id=${bean.gid}&quot; target=&quot;_blank&quot;&gt;${bean.content}&lt;/a&gt;&lt;/td&gt;
            &lt;td class=&quot;layui-table-cell&quot; align=&quot;center&quot;&gt;
                &lt;!--&lt;a href=&quot;method!goodsedit?id=${bean.id}&quot;&gt;修改&lt;/a&gt; | --&gt;&lt;a href=&quot;method!replydelete?id=${bean.id}&quot; onclick=&quot;return confirm('确定删除')&quot;&gt;删除&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/c:forEach&gt;
&lt;/tbody&gt;
</code></pre>
<p>最后,在HTML文件的<script>标签中初始化Layui的table组件:</p>
<pre><code class="language-html">&lt;script&gt;
    layui.use('table', function(){
        var table = layui.table;
        //执行渲染
        table.init();
    });
&lt;/script&gt;
</code></pre>
<p>以上就是使用Layui进行美化的示例代码</p>
用layui美化 div class=table-list table width=100 cellspacing=0 thead tr th width=40IDth th width=100用户th th width=110评论内容th

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

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