table width: 100%未撑满父容器，主因是父级缺乏明确宽度基准，需确保html、body及所有中间容器均设width: 100%或margin: 0，并配合table-layout: fixed、col列宽定义及height链式继承（html→body→容器→table）方可稳定全屏。
table width: 100% 为什么没撑满父容器？
直接写 width: 100% 失效，通常不是 CSS 写错了，而是父级没给明确宽度基准。百分比宽度依赖父容器的 width 值——如果父容器是 body，而 body 没设 width 或被 margin/padding 干扰，table 就会按内容宽度收缩。
- 必须确保
html,body和所有中间容器（如div.wrapper）都设了width: 100%或width: 100vw -
body默认有8px margin，会导致100%实际变窄，务必加margin: 0 - 若表格嵌套在
form或section里，这些中间元素也得显式设宽，否则100%无参照 - 避免用
table { width: 100vw }：滚动条存在时，100vw会超出视口，触发横向滚动
height: 100% 在 table 上为何总是塌陷？
表格元素对百分比高度极其敏感，height: 100% 几乎不可能直接生效，因为 table 不是块级盒模型，且其高度由行高和内容驱动，不继承父容器高度。
- 必须逐层向上设高：
html,body, 所有包裹容器（包括form,div），最后才是table——漏一级就断链 -
table本身设height: 100%仍可能无效，更可靠的是用min-height: 100vh+display: block强制块化 - 移动端 Safari 中，
100vh会随地址栏收起跳变，优先用min-height: 100dvh，再 fallback 到100vh - 如果表格内要填满单元格，
td和th需额外设height: 100%，且父tr必须有高度来源（比如tr { height: 100% }）
table-layout: fixed 是全屏表格的隐性刚需
当表格宽度设为 100% 后，列宽常因内容挤压或拉伸，导致“全屏”只是容器宽了，内部结构依然错乱。这时 table-layout: fixed 不是可选项，而是稳定布局的前提。
-
table-layout: fixed让浏览器按第一行th/td的宽度（或col定义）分配列宽，不随内容重排，性能更高 - 配合
width: 100%使用时，需显式定义列宽，例如：col:nth-child(1) { width: 20% }或th:first-child { width: 150px } - 若用
table-layout: auto（默认），即使设了100%，长文本仍可能撑开某列，破坏全屏对齐 - 注意：
table-layout: fixed下，td内文字换行需手动加word-break: break-word或overflow-wrap: break-word
真正全屏 ≠ 硬撑满，而是保比例+防溢出
数据大屏或监控看板场景下，“全屏”本质是等比缩放并居中填充，而非简单拉伸到 100vw/100vh。后者在非设计稿宽高比的屏幕上必然变形或留黑。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 无法判断当前屏幕宽高比，必须用 JS 计算缩放因子：
Math.min(window.innerWidth / 1920, window.innerHeight / 1080) - 用
document.documentElement.style.fontSize动态设 rem 基准，让所有尺寸（包括表格宽高、字体、边距）同步缩放 - 表格外层容器加
overflow: hidden，防止缩放后内容溢出；表格自身用max-width: 100%防止超宽 - 移动端小屏慎用全屏表格，建议用
@media (max-width: 768px)切换为横向滚动容器或卡片列表
全屏表格最难的部分不在写法，而在验证：iOS 地址栏收起、横竖屏切换、不同 DPR 屏幕下的高度一致性，这些地方 JS 补偿和 dvh 单位缺一不可。
