HTML表格无法直接全屏拉伸不失真，因height属性对table默认无效、行高由内容驱动；可靠方案是用100dvh容器+flex布局包裹表格，设flex:1并配overflow: auto，再通过font-size/clamp()和padding优化可读性。
HTML 表格本身不能直接“全屏拉伸”而不失真——width: 100% 只能撑满父容器宽度，height: 100% 在绝大多数情况下根本无效，因为表格行高由内容驱动，不是由 CSS 高度控制的。真要让表格视觉上占满视口且可读，得绕开“拉伸表格单元格”这个死胡同，用容器+布局层来承载。
为什么 table { height: 100vh } 多数时候没用
表格（<table>）是替换元素（replaced element）的特殊变体，它的高度计算逻辑和普通块级元素不同：height 属性对 <table> 默认不生效（除非设 display: block，但会破坏语义和渲染行为）；<tr> 和 <td> 的 height 也仅作为最小高度提示，浏览器优先按内容撑开。
-
table { height: 100vh }→ 实际高度仍由内容决定，多余空间留白或溢出 -
td { height: 100% }→ 父<tr>没显式高度，百分比无计算基准，直接忽略 - 用
transform: scale()强行放大 → 字体、边框、间距全被等比放大，移动端可能超出视口、触发横向滚动
真正可用的全屏表格容器方案
把表格当内容，放进一个真正能撑满视口的容器里，再通过 padding / font-size / overflow 控制可读性。这不是“拉伸表格”，而是“包裹+适配”。
- 给外层
<div>设height: 100dvh（比100vh更稳，避开 iOS 地址栏跳变） - 该容器设
display: flex; flex-direction: column，让表格成为唯一子项 - 表格设
width: 100%+flex: 1（需父容器是 flex），它就会填满剩余高度 - 加
overflow: auto到容器或表格 wrapper，保证内容多时可滚动，不撑破布局
<div style="height: 100dvh; display: flex; flex-direction: column;">
<table style="width: 100%; flex: 1; border-collapse: collapse;">
<tr><td>A</td><td>B</td></tr>
</table>
</div>
min-height: 100vh 和 height: 100vh 的区别必须看清
这两个值在表格场景下影响极大：
立即学习“前端免费学习笔记（深入）”；
-
height: 100vh→ 容器严格等于视口高度，表格内容超长时会溢出、遮挡、或触发隐藏滚动条（尤其 Safari） -
min-height: 100vh→ 容器至少占满视口，内容多就自动撑高，更安全，适合数据量不确定的大屏表格 - 如果表格数据固定且必须严格卡在视口内，才考虑
height: 100vh+overflow: hidden或overflow-y: auto
字体与行高才是“视觉拉伸”的关键杠杆
与其折腾表格尺寸，不如调 font-size 和 line-height 让内容在有限空间里更饱满。配合 rem 或 clamp() 实现响应式缩放：
-
font-size: clamp(14px, 2.5vw, 18px)→ 小屏保最小字号，大屏不撑爆 -
td, th { padding: 0.5rem 0.75rem; line-height: 1.4 }→ 避免文字贴边，提升呼吸感 - 禁用
table-layout: fixed除非你手动设了所有<col>宽度，否则容易截断文本
真正难的不是让表格“看起来大”，而是让它在不同分辨率下保持可读、可滚动、不换行错位——这些细节比宽高数值更重要，也更容易被忽略。
