百分比 height 无效是因为父元素无明确高度；需设 html、body 高度为 100vh 或 100%；表格容器须设 min-height/max-height 并用外层 div 包裹实现滚动；单元格用 word-wrap 和 vertical-align 控制内容撑高；动态场景优先用 ResizeObserver。
百分比 height 在 <table> 上为什么无效？</H3>
<p>因为 <code>height: 50%
这类百分比高度，只在父元素有明确高度时才生效。而默认的 body 高度由内容撑开，并非视口高度——所以直接写 table { height: 80% } 会退化成 height: auto，实际毫无作用。
必须向上追溯并显式设置祖先链的高度：
-
html, body { height: 100vh; margin: 0; }（推荐，vh更直接） - 或
html { height: 100%; } body { height: 100%; margin: 0; }（兼容旧浏览器，但依赖父级已定义高度） - 若表格嵌套在某个
div容器中，该容器也必须设height或min-height
min-height 和 max-height 比 height 更实用
固定高度（如 height: 400px）容易被长内容撑破或留白过多；纯 height: auto 又无法约束上限。真正可控的是组合使用：
-
min-height: 200px：保证表格至少显示两行，避免空数据时塌陷 -
max-height: 60vh：限制最大占用视口 60%，超出部分可滚动 - 配合
overflow-y: auto在table的父容器上启用纵向滚动（<table> 自身不支持 <code>overflow）注意：不要对
<table> 直接设 <code>overflow，它不生效；必须用外层div包裹并设overflow-y: auto。立即学习“前端免费学习笔记（深入）”；
单元格内容撑高表格？用
word-wrap和vertical-align控制表格高度自适应的最大干扰源不是行数，而是单个
<td> 内的长文本、图片或嵌套元素。默认情况下，它们会无限制拉高整行高度。 <ul> <li> <code>td, th { word-wrap: break-word; overflow-wrap: break-word; }：强制换行，避免超长 URL 或无空格字符串横向撑开 -
td, th { vertical-align: top; }：防止不同行单元格内容高度不一致导致错位（尤其混用图文时） - 慎用
height设在<td> 上——它会覆盖 <code>auto行为，且在table-layout: fixed下可能被忽略需要动态撑高？别依赖 JS 监听 resize
多数场景下，纯 CSS 已足够：用
min-height+max-height+ 外层滚动容器，就能覆盖从空数据到百行列表的跨度。只有当表格内容由频繁异步加载（如分页追加、WebSocket 推送）触发高度突变时，才需 JS 干预。- 优先用
resizeObserver监听表格父容器尺寸变化，而非window.resize（性能差、触发频繁） - 避免每次内容更新都调用
table.style.height = ...——这会破坏 CSS 流式行为，且在响应式切换时易冲突 - 真要 JS 控制，建议只更新外层容器的
max-height，让内部表格继续走auto计算逻辑
真正难处理的不是高度计算本身，而是混合了
position: sticky表头、跨行单元格（rowspan）和动态行合并的场景——这时 CSS 会失效，必须用 JS 做 layout patch。 - 优先用
