html表格无法真正全屏，因height:100vh对其无效且列宽易崩坏；需结合table-layout:fixed、colgroup控宽，外层flex布局+flex:1控高，并用overflow处理内容溢出。
HTML 表格本身不支持真正意义上的“全屏显示”，width: 100% 和 height: 100vh 只是让它撑满父容器或视口，但高度往往失效、内容溢出、滚动条错乱——这不是全屏，只是“看起来像”。真要让表格在大屏上稳定铺满且不拉伸变形，必须拆解两个问题：宽度可控性 + 高度可落地性。
为什么 height: 100vh 在表格上基本无效
表格行高由内容驱动，table 元素的 height CSS 属性只起最小高度作用（不是强制高度），浏览器会无视它去适应 tr/td 内容。常见现象包括：
- 设了
height: 100vh，但表格实际高度仍由内容撑开，下方留白或溢出 -
tr { height: 100vh }会被忽略，除非配合table-layout: fixed - 嵌套在 flex/grid 容器里时，父级未设
height: 100%，子表格根本拿不到可用高度
用 table-layout: fixed + colgroup 锁死宽度再谈全屏
没有固定列宽机制，width: 100% 就是纸面承诺。表格默认 table-layout: auto，列宽由最长内容决定，导致缩放后列宽崩坏。必须显式控制：
<table style="table-layout: fixed; width: 100%;"> 是前提 <li> <code><colgroup> <col style="width: 20%"> <col style="width: 30%"> </colgroup>才能按比例分配列宽- 避免在
td上写width，优先走<col>—— 否则在 Safari 中可能被忽略 - 若需等宽列，用
<col style="width: 1fr">（仅 Chrome/Firefox 支持，非标准，生产环境慎用） - 外层容器设
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } - 表格父容器用
display: flex; flex-direction: column; height: 100vh;，再把<table> 作为 flex item <li>表格自身设 <code>flex: 1; min-height: 0;（防止 flex 容器高度计算失效） - 单元格内文字用
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }防溢出破坏布局 - 如需响应式缩放（比如数据大屏），必须放弃纯 CSS，改用 JS 动态算缩放比 +
document.documentElement.style.fontSize驱动 rem 基准（参考 1920×1080 设计稿适配逻辑）
让表格“视觉全屏”的真实做法
所谓全屏，本质是让表格区域填满屏幕可视区，同时保持可读性。这需要组合策略，而非单靠 width/height：
真正麻烦的从来不是怎么写 width: 100%，而是当表格内容动态增减、字体大小变化、多语言文本混排时，如何让高度始终贴合容器又不牺牲可读性——这时候，max-height + overflow-y: auto 往往比强行“全屏”更实用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
