Layui table 在 Tab 切换后宽度塌陷是因为初始化时容器 display: none 导致尺寸计算为 0；需在 Tab 激活时调用 table.resize() 并确保容器已可见且具备明确宽高，固定列还需触发 scroll 事件重置定位。
layui table 在 tab 切换后宽度塌陷
这是 layui table.render() 的经典坑：表格初始化时依赖容器可见尺寸，而 tab 面板默认是 display: none，导致渲染时取到的宽度为 0，列宽计算失真，切过去就挤成一团。
核心解法不是“重绘样式”，而是让表格在显示前重新获取真实容器尺寸并重排。Layui 官方没暴露重排接口，得靠手动触发：
- Tab 激活时（比如监听
tabChange事件），先调用table.resize()强制刷新尺寸 - 如果用了固定列（
fixed: true），必须等 DOM 完全显示后再调，否则resize()无效 —— 建议加setTimeout(..., 0)或用nextTick类似逻辑 - 若表格容器本身有动态宽度（如百分比、flex 子项），确保父级在 Tab 显示时已具备明确 width/height，否则
resize()仍会算错
layui table 固定列在多 Tab 下错位
固定列（fixed: 'left' 或 'right'）依赖绝对定位和容器 scrollWidth 计算，而隐藏 Tab 中的元素 scrollWidth 为 0，切回来后坐标未更新，就会漂移或重叠。
不能只靠 table.resize()，得配合手动重置固定列容器状态：
- 在 Tab 切换回调中，先执行
table.resize('yourTableId') - 紧接着手动触发一次表格区域的 scroll 事件：
$('#yourTableId').closest('.layui-table-box').trigger('scroll') - 如果用了自定义工具栏或高度自适应（
height: 'full-xx'），要确认full-xx对应的父容器在 Tab 显示时已渲染完毕，否则高度计算仍为 0
使用 iframe 嵌入 Layui 表格时样式异常
不少项目用 iframe 加载独立 Tab 页面，结果表格列宽乱、边框断、滚动条错位 —— 这不是 Layui 问题，是 iframe 加载时机与父页 CSS 隔离导致的。
关键点在于 iframe 内容加载完成、且父页 Tab 面板已 visible 后，再初始化表格：
- 不要在 iframe 的
$(document).ready()里直接table.render()，改用window.onload或监听load事件确保 DOM + 样式完全就绪 - 避免在 iframe 中引用父页的 CSS 变量或全局样式（如
.layui-table th被父页覆盖），建议用!important锁定关键尺寸，或把表格相关 CSS 单独内联进 iframe - 如果父页用了 rem/vw 布局，iframe 默认不继承根字体大小，需在 iframe 内显式设置
html { font-size: 16px }或同步计算
最易被忽略的是：Layui 表格的尺寸恢复依赖「容器可见」这个前提，而不是「DOM 存在」。哪怕你把 display: none 改成 visibility: hidden，它依然算不出正确宽度 —— 必须是 display: block 且父级可测量。这点在嵌套布局、动态 Tab、微前端场景下，几乎每次都会踩。
