表格全屏需将节点移至body并设fixed定位，禁用overflow限制；须保存/恢复tableLayout与列宽；ESC退出要守卫状态并清理监听器；打印前需重置定位。
表格全屏显示需要移除父容器的 overflow 限制
默认情况下，<table> 被包裹在有 overflow: hidden 或 overflow: auto 的容器里（比如 <div class="card">），点击“全屏”后表格依然被裁剪。关键不是放大表格本身，而是让表格脱离受限布局流。
- 最稳妥的做法是用
document.body.appendChild(table)把表格节点临时移到<body>下，同时加position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; - 别用
fullscreenElementAPI 直接调用table.requestFullscreen()—— 大多数浏览器不支持对<table>元素调用，会报错Failed to execute 'requestFullscreen' on 'Element': Cannot request fullscreen on a non-replaced element - 如果必须保留原 DOM 结构，可改用
transform: scale()配合transform-origin: top left，但需同步调整scrollLeft/scrollTop和鼠标事件坐标，复杂度陡增
切换时要重置表格宽度和列宽行为
普通模式下常用 table-layout: fixed + <col> 设置列宽；全屏后若保持固定布局，可能因 viewport 变大导致列宽比例失真，尤其当列含长文本或 <input> 等可伸缩元素时。
- 进入全屏前保存原始
style.width、col.style.width和table.style.tableLayout - 全屏时设
table.style.tableLayout = 'auto'，并清除所有<col>的width，让浏览器按内容重算列宽 - 退出全屏时恢复保存的值 —— 注意不要简单用
removeAttribute('style')，因为可能覆盖其他必要内联样式 - 避免用
vw单位写死列宽，它在缩放或分屏窗口下表现不稳定
键盘快捷键与 ESC 退出必须手动监听
document.addEventListener('keydown', e => { if (e.key === 'Escape') { exitFullscreen() } }) 是必须项，但容易漏掉两点：一是未判断当前是否处于全屏状态，导致误触发；二是未移除已绑定的监听器，反复切换后监听器堆积。
- 用一个布尔变量（如
isTableFullscreen）或检查表格是否在document.body下来 guard 退出逻辑 - 进入全屏时用
document.addEventListener('keydown', handleEsc, false)，退出时务必调用document.removeEventListener('keydown', handleEsc) - 移动端无 ESC 键，需额外提供显式“退出”按钮，并用
position: fixed; bottom: 20px; right: 20px;定位，避免被虚拟键盘遮挡
打印样式和缩放适配常被忽略
用户点“全屏”往往是为了截图或打印，但 @media print 默认仍按原始尺寸渲染，且 Chrome 在全屏模式下缩放页面（Ctrl + +）会导致表格溢出视口又不触发滚动条。
立即学习“前端免费学习笔记（深入）”；
- 在全屏样式块中加入
@media screen and (max-width: 1024px) { table { font-size: 12px; } }做基础响应 - 打印前主动调用
window.print()时，先临时设table.style.position = 'static'并移除fixed定位，否则打印内容为空白 - 不要依赖
window.devicePixelRatio做像素修正 —— 它在缩放后不实时更新，应改用matchMedia('(resolution: 2dppx)')监听变化
