根本原因是Layui表格初始化时依赖父容器明确像素宽度，而flex容器未显式设宽时clientWidth返回0，导致setColsWidth计算失效、列宽错乱。
Flex容器里layui.table.width计算为0的根本原因
Layui表格初始化时会调用setColsWidth方法读取父容器的clientWidth或offsetWidth来分配列宽。但当表格直接放在display: flex的父容器中时，该父容器若未显式设宽（比如只写了width: 100%），浏览器返回的尺寸就是0——Layui拿到0，后续所有列宽计算全崩，表现为表头和tbody列完全错位、横向滚动条异常、甚至整张表塌缩成一条线。
必须禁用flex布局，改用layui-table-box标准结构
这不是“兼容性优化”，而是Layui内部列宽测量机制的硬性依赖。它需要一个具备明确像素宽度的块级容器做基准，而flex子项的宽度是弹性计算出来的，无法被getBoundingClientRect()等API稳定读取。
- 把
table标签从display: flex的父div里移出来，外层严格套一层<div class="layui-table-box"></div> -
.layui-table-box的直接父级必须有明确宽度：比如width: 1200px、max-width: 100%且上层有定宽容器，或flex: 1但该flex容器本身已设宽 - 检查开发者工具里
.layui-table-box的offsetWidth——如果是0，说明父级没撑开，得往上逐层排查 - 禁止对
.layui-table-box或其直接父级设置display: flex或display: grid，哪怕只加了一行style="display:flex"也会触发问题
如果非要用flex布局，只能靠min-width兜底
某些UI框架强制要求表格嵌在flex容器里（比如Ant Design Pro风格的侧边栏+主内容区），此时不能硬改DOM结构，就得用CSS层面的妥协方案：
- 给
.layui-table-box加min-width: 800px（按实际最小可用宽度调整） - 同时确保其flex父容器设置了
min-width，避免flex收缩到底 - 禁用
autoSort: true，因为排序图标占位会进一步挤压列宽计算空间 - 所有列都必须显式配置
minWidth（不是width），例如{field: 'name', title: '姓名', minWidth: 120}——只设width在flex下基本无效
动态渲染后必须手动resize，且传入ID参数
即使DOM结构和CSS都对了，表格在flex容器中首次渲染仍可能因时机问题拿不到正确尺寸。尤其在Tab切换、layer弹层、或v-if/v-show控制显隐的场景下：
- 不要用
table.resize()无参调用，必须传表格ID：table.resize('yourTableId') - 如果表格是异步加载或条件渲染，要在DOM插入完成后再调用，比如在
success回调或nextTick里执行 - 用了
fixed: 'left'列时，要额外触发一次scroll事件：$('#yourTableId').closest('.layui-table-box').trigger('scroll')，否则固定列坐标不会更新
