layui表格f11全屏错乱是因未监听fullscreenchange事件且未调用table.resize()，需手动监听并延迟调用resize()修复尺寸，固定列还需额外调用getscrollwidth()或调整css。
直接结论：layui 表格在浏览器原生全屏（f11）下错乱，不是表格 bug，而是它没监听 fullscreenchange 事件、也没自动调用 table.resize() —— 必须手动补上这两步，否则列宽、滚动、固定列全部失准。
为什么 F11 全屏后表格立刻错位？
浏览器 F11 全屏只是改变 document.documentElement 的尺寸，但 Layui 表格初始化时已把容器宽高（尤其是 height 配置值）缓存进内部状态。退出全屏后，视口缩回，表格仍按“全屏时的高度”渲染，导致高度残留、横向滚动条异常、固定列偏移。
常见现象包括：
- 退出 F11 后表格高度卡在全屏尺寸，底部留白或内容被截断
- 带
fixed: true的列与主体列垂直对不齐 - 启用
cellMinWidth时列宽分配崩坏，最后一列被压缩或撑开 - 合计行（
totalRow）位置漂移
必须监听 fullscreenchange 并手动 table.resize()
这是唯一可靠解法。Layui 2.8+ 内置了 layui.fullscreen 模块，但 F11 是浏览器级行为，和它无关 —— 你得自己监听全局事件。
关键操作：
- 用
document.addEventListener('fullscreenchange', ...)捕获进入/退出状态 - 进入全屏时可选：隐藏非必要 UI（如侧边栏），但**不需动表格配置**
- 退出全屏时**必须立即调用
table.resize('yourTableId')** - 强烈建议加
setTimeout(..., 16)延迟执行resize，等浏览器完成重排
示例代码：
document.addEventListener('fullscreenchange', function () {
if (!document.fullscreenElement) {
setTimeout(function () {
table.resize('test'); // 'test' 是你的表格实例 ID
}, 16);
}
});
使用 fixed 列时额外要做的一步
如果表格启用了左/右固定列，仅 table.resize() 不够 —— 固定列的滚动计算可能未触发，导致水平对齐错位。
修复方式：
- 在
resize()后补一句table.getScrollWidth('test')，强制刷新内部滚动宽度缓存 - 或者把固定列容器的 CSS 改为
max-width: 100vw，避免依赖绝对像素宽 - 避免在全屏逻辑里手动修改
elem.style.height，这会干扰 Layui 内部高度管理
别踩这些坑
很多人试过但失败的做法：
- 只改表格外层
div的style.height = '100vh'—— 这不是真全屏适配，F11 退出后布局必乱 - 用
layui.fullscreen.toggle()模拟全屏 —— 它只控制指定 DOM，和 F11 无关，无法触发fullscreenchange - 在
fullscreenchange里调用table.reload()—— 数据重载不等于尺寸重绘，列宽照样错 - 升级到 Layui 2.10 以为自动修复 —— 官方至今未将
fullscreenchange集成进 table 模块，默认仍需手动处理
最易被忽略的一点：F11 全屏是全局事件，哪怕你有多个表格，也只需监听一次 fullscreenchange，但每个表格的 resize() 必须单独调用 —— 少一个，那个表就永远错位。
