← 返回首页

layui数据表格自动换行解决办法

📖 正文内容

问题背景

不是所有的列表都是一行就搞定,如果遇到layui.table需要支持自动换行的情况,这个时候就需要改造layui的数据表格,支持自动换行。


第一种:在需要的当前页用下面样式:
<style>     .layui-table-cell {         line-height: 20px !important;         vertical-align: middle;         height: auto;         overflow: visible;         text-overflow: inherit;         white-space: normal;     } </style>
在程序上面用下面(发现不加上也可以实现)
done: function(res, curr, count){     $(".layui-table-main tr").each(function (index, val) {         $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());         $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());     }); }

:第二种:同样在当前页
.layui-table-cell {                 height: auto ;                 white-space: normal;                 word-wrap:break-word;             }

💡 示例代码

<div style='--en-codeblock:true;--en-blockId:q92NQOsVX_N;--en-meta:{"title":"","lang":"Python","theme":"default","showLine":true,"lineWrap":false};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;'>&lt;style&gt;
    .layui-table-cell {
        line-height: 20px !important;
        vertical-align: middle;
        height: auto;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
    }
&lt;/style&gt;
</div>

<div style='--en-codeblock:true;--en-blockId:Ucr0Qqp-wRI;--en-meta:{"title":"","lang":"Python","theme":"default","showLine":true,"lineWrap":false};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;'>done: function(res, curr, count){
    $(".layui-table-main tr").each(function (index, val) {
        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
    });
}
</div>

<div style='--en-codeblock:true;--en-blockId:j-VQQ65d3ms;--en-meta:{"title":"","lang":"Python","theme":"default","showLine":true,"lineWrap":false};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;'>.layui-table-cell {
                height: auto ;
                white-space: normal;
                word-wrap:break-word;
            }
</div>

💭 技巧提示

💡
None

📚 参考资料

💬 评论交流

👤
用户 A 2026-03-25

这个技巧很实用,感谢分享!