百分比 height 无效是因为父元素无明确高度；需设 html、body 高度为 100vh 或 100%；表格容器须设 min-height/max-height 并用外层 div 包裹实现滚动；单元格用 word-wrap 和 vertical-align 控制内容撑高；动态场景优先用 resizeobserver。

百分比 height 在

上为什么无效？

因为 height: 50% 这类百分比高度，只在父元素有明确高度时才生效。而默认的 <code>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 又无法约束上限。真正可控的是组合使用：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！