layui表格在高版本chrome/edge中排版塌陷主因是容器不可见或尺寸未就绪，需确保display可见、父容器宽高明确，并在tab激活等时机调用table.resize()及trigger('scroll')修复固定列。
高版本 Chrome 和 Edge（Chromium 内核 90+）本身对 Flex、Grid、CSS 变量等支持良好，Layui 表格在这些浏览器中排版塌陷，通常不是浏览器兼容性问题，而是初始化时机、容器状态或样式干扰导致的尺寸计算错误。重点不在“降级兼容”，而在“确保渲染条件稳定”。
确保表格容器可见且尺寸已就绪
这是最常见原因：表格在 display: none、visibility: hidden 或父容器宽高未明确时初始化，Layui 读取到的 offsetWidth 为 0，列宽全按默认值（如 150px）硬算，后续显示时就严重错位或压缩。
- Tab 切换页、折叠面板、弹窗 layer 中的表格，必须等容器完全 visible 后再调用
table.render() - 推荐做法：监听容器显示事件（如
layui.tab.on('tab')、layer.open的success回调），延迟一帧执行渲染：requestAnimationFrame(() => table.render({...})) - 若已渲染完但切换后塌陷，立刻调用
table.resize('id')—— 它会重新测量容器并重分配列宽
避免 Flex 容器对表格的隐式挤压
当 Layui 表格放在 display: flex 的父容器里（如左侧菜单+右侧主内容区布局），Flex 子项默认 min-width: auto 会阻止表格收缩，导致容器宽度被“撑大”，而表格内部列宽仍按旧尺寸算，出现右侧白边或横向滚动条。
- 给表格直接父容器加两行关键样式：
min-width: 0+overflow: hidden - 示例：
.main-content { flex: 1; min-width: 0; overflow: hidden; } - 不要只加
overflow: hidden，min-width: 0才是允许 flex 子项真实收缩的核心
固定列与滚动同步需手动加固
高版本浏览器下，fixed: 'left' 列依赖绝对定位和容器 scrollLeft 同步。但若表格在隐藏状态初始化，其内部固定列容器的 scrollWidth 为 0；切回后即使 resize，定位坐标也不会自动更新，造成漂移或重叠。
- 在 Tab 激活或容器显示后，先
table.resize('id')，再手动触发一次滚动区域的 scroll 事件：$('#myTable').closest('.layui-table-box').trigger('scroll') - 如果用了自定义高度（如
height: 'full-100'），确认该高度所依赖的父容器（如.layui-body）已具备明确高度，否则full-xxx计算结果为 0
检查 CSS 干扰与字体渲染稳定性
Edge 和新版 Chrome 对自定义字体、缩放、硬件加速更敏感。局部样式覆盖或系统级设置偏移，会间接影响表格盒模型。
- 禁用所有浏览器扩展，用无痕模式测试——广告拦截、暗色模式插件常劫持
table标签或注入冲突!important规则 - 确保页面缩放为 100%（
edge://settings/appearance或chrome://settings/appearance） - 避免在全局样式中用
!important覆盖.layui-table th, td的padding、white-space或overflow，这些直接影响单元格内容截断与对齐
