直接给设height属性基本无效，因html的height属性已被w3c废弃，且css中table { height: 400px }在默认table-layout: auto下仅起最小高度作用；真正生效需配合table-layout: fixed、显式宽度及父容器明确高度，并推荐用min-height+tbody { display: block; max-height; overflow-y: auto }实现可靠固定高度滚动效果。

直接给 <table> 设 <code>height 属性基本无效

现代浏览器里，<table height="400"> 这种写法虽能偶然生效，但属于 HTML4 遗留属性，W3C 已废弃。它不支持 <code>vh、% 等单位，也不响应式，更无法保证“固定”——内容一多就撑开，内容一少又缩成一行。别依赖它。

table { height: 400px } 为什么经常没反应

因为默认 table-layout: auto，浏览器优先按内容计算高度，height 只起“最小高度”作用（且非标准语义）。常见现象：写了 height: 100vh，表格却只高 24px。

• 必须加 table-layout: fixed —— 它让表格脱离内容驱动布局，才能真正响应 height
• 必须设显式宽度，如 width: 100% 或具体像素值，否则 fixed 模式下列宽会崩
• 父容器（包括 html、body、包裹 <div>）需有明确高度，否则 <code>100vh 或百分比无参照

  真正可靠的固定高度方案：用 min-height + overflow

  如果目标是“视觉上固定、内容超长时滚动”，这才是生产环境最稳的组合：

  

  Wechat HTML Publisher

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

  下载

  table {
    width: 100%;
    table-layout: fixed;
    min-height: 400px;
    border-collapse: collapse;
  }
  tbody {
    display: block;
    max-height: 400px;
    overflow-y: auto;
  }
  thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  • min-height 保底，内容少时不塌陷
  • tbody 改为 block 才能启用 max-height 和滚动条
  • thead 和 tr 必须重置回 display: table，否则表头错位、列对不齐
  • 注意 Safari 对 display: table 在子元素中兼容性略差，建议加 vertical-align: top

  单元格内文字垂直居中却撑高？

  固定高度下，td 里文字换行或含图片极易突破高度。别只靠 height：

  • 用 height: 48px + line-height: 48px + vertical-align: middle 控制单行
  • 多行场景改用 min-height: 48px + padding: 8px 12px + box-sizing: border-box
  • 防图片撑高：给 img 加 max-height: 100% 和 object-fit: contain
  • 避免在 tr 上设 height —— Chrome 忽略它，Firefox 行为不一致
  固定高度不是简单写个 height 就完事。关键约束有三个：table-layout: fixed、父容器显式高度、tbody 的块级滚动封装。漏掉任意一个，都会在不同浏览器或数据量变化时突然失效。