HTML表格无法直接全屏拉伸，因其高度属性仅起最小限制作用且受内容驱动；正确做法是用有明确高度的容器包裹，设table为display: block并配合height: 100%、100dvh/100vh及transform缩放与JS动态补偿。
HTML表格本身不能直接“全屏拉伸”——它不是容器型元素，width: 100vw 和 height: 100vh 对它无效，强行设高还会被内容撑开或塌陷。真要让表格占满整个视口，必须把它放进一个**有明确宽高的容器里**，再控制表格自身的行为。
为什么直接给 table 设 height: 100vh 没用
浏览器对表格高度的计算逻辑特殊：height 属性在 table 上只起“最小高度”作用，且默认 table-layout: auto 下，行高由内容决定，不会主动填满父容器。你看到的“没拉伸”，其实是它根本没响应高度声明。
- 即使写了
table { height: 100vh; }，只要内容不够高，它就还是内容高度 - 加了
vertical-align: bottom或display: block也救不回来——表格的渲染盒模型不支持常规块级高度继承 - 移动端 Safari 中，
100vh本身就不稳定，地址栏收起时高度突变，表格会突然留白或溢出
正确做法：用容器包裹 + display: block + 高度同步
核心是绕过表格自身的高度限制，把它当普通块元素处理。前提是容器必须有确定高度，且表格脱离默认表格流。
- 给父容器（比如
<div class="table-container">）设height: 100dvh（优先），降级用height: 100vh - 给
table加display: block，让它失去表格显示模式，能响应 height - 再加
height: 100%让它撑满容器（此时有效，因为父容器已有明确高度） - 为防文字换行撑高，可加
white-space: nowrap；需要滚动时，把容器设overflow: auto
`.table-container {
height: 100dvh;
height: 100vh; /* fallback */
}
table {
display: block;
height: 100%;
width: 100%;
}`表格内容怎么等比缩放不糊？别硬拉伸
单纯拉宽拉高会让字体、边框、内边距全变形，尤其小屏上文字挤成一条线。真正可用的方案是“缩放整个表格结构”，而不是拉伸单元格。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: scale()配合transform-origin: top left，动态算缩放比：Math.min(window.innerWidth / 1920, window.innerHeight / 1080) - 把缩放应用在
table的父容器上，避免影响内部th/td的盒模型计算 - 记得加
will-change: transform提升渲染性能，否则滚动时卡顿明显 - 慎用
font-size: clamp()替代缩放——它只调字号，不调行高和 padding，表格结构依然会错位
移动端表格全屏的隐藏雷区
在 iOS Safari 上，仅靠 CSS 很难稳住高度。地址栏收起瞬间，100vh 值跳变，表格会被截断或底部留白。这时候 JS 补偿不是可选，是必须。
- 监听
resize和scroll（iOS 地址栏变化不一定触发 resize，但 scroll 一定动） - 用
window.innerHeight而不是document.documentElement.clientHeight——后者在某些 WebView 里不准 - 节流执行：
container.style.height = window.innerHeight + 'px'，避免高频重绘 - 首次渲染别在
DOMContentLoaded里设高，等setTimeout(() => {}, 100)确保地址栏状态稳定
最易被忽略的是：表格全屏从来不是单点样式问题，它是 viewport 设置、容器高度链、表格显示模式、缩放逻辑、JS 同步五层叠加的结果。漏掉任意一层，用户一滑动，页面就露底。
