table设width: 100%但高度不生效，因height在table上仅为最小高度且受table-layout: auto限制；需父容器有明确高度、table设table-layout: fixed及colgroup控制列宽，并注意safari兼容性问题。
table设width: 100%但高度不生效？先看height到底管不管用
直接给 table 加 height: 100% 大概率没反应——因为表格默认是 table-layout: auto，且 height 在 table 元素上只是“最小高度”，不是强制撑满。浏览器会优先按内容撑开行高，哪怕你写了 height: 100vh，只要内容不够高，它就只显示内容实际高度。
常见错误现象：table { width: 100%; height: 100vh; } 在开发者工具里看到计算高度是 0 或远小于视口，表格只占一行高。
- 必须确保父容器有明确高度（比如
html, body { height: 100%; }） -
table的父元素（如div）也要设height: 100%，否则100%无参照 - 如果父容器是 flex 或 grid 容器，需额外加
align-items: stretch或grid-template-rows: 1fr
让表格真正“撑满全屏”的三步硬要求
全屏 ≠ 填满视口像素，而是：宽度铺满、高度填满、内容不溢出滚动。这需要三层配合，缺一不可。
- 根级约束：
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } - 容器包裹：
<div style="height: 100vh; display: flex; flex-direction: column;"><table>...</table></div>，用 flex 强制子元素拉伸 - 表格自身：
table { width: 100%; height: 100%; table-layout: fixed; }——table-layout: fixed是关键，它让列宽/行高脱离内容影响，才能响应 height 设置
colgroup + width 控制列宽，避免100%宽度下文字挤成一团
只设 table { width: 100% }，浏览器仍可能把所有列压成窄条，尤其当某列内容很长（比如长 URL 或中文无空格文本）。这时 colgroup 就不是可选项，而是必选项。
示例写法：
| ID | 姓名 | 备注 |
-
<col>必须紧贴<table> 开始后、<code><thead> 或 <code><tbody> 之前<li> <code>1fr在 Chrome/Firefox 可用，但非标准；更稳妥用width: calc(100% - 370px)替代 - 配合
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }防止文字撑破列宽 - 别依赖
height: 100vh，改用 JS 动态计算：document.documentElement.clientHeight - 简单 fallback：
min-height: 100vh; height: -webkit-fill-available;（Safari 15.4+ 支持） - 真要全屏又保比例（比如数据大屏），必须放弃纯 CSS，走
rem缩放路线：用 JS 算缩放因子，动态设document.documentElement.style.fontSize，所有尺寸用rem写
全屏表格在 Safari 和移动端的兼容性坑
100vh 在 iOS Safari 和部分安卓 WebView 中会把地址栏高度算进去，导致表格被截断或底部留白。这不是 bug，是它们把视口高度定义为“视觉视口”而非“布局视口”。
最易被忽略的一点：表格内容区域（tbody）高度可能被边框、padding、border-collapse 拉偏，调试时务必检查 computed height 是否真的等于容器 height —— 很多“没撑满”其实是内部盒模型吃掉了空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
