的height属性基本无效，应删去并改用/的height+line-height+vertical-align+box-sizing控制；table-layout:fixed配合col宽度才能锁定行高；多行内容用max-height+overflow处理；响应式场景优先用min-height而非height。

直接在 <tr> 上写 <code>height 基本无效

Chrome 完全忽略 <tr> 的 <code>height 属性，Firefox 表现也不一致，这不是标准支持行为。哪怕你写了 <tr height="60">，实际渲染高度仍由 <code><td> 内容和默认 <code>line-height 决定。

实操建议：

• 删掉所有 <tr> 上的 <code>height 属性——它不可靠，且会误导后续维护
• 把控制权交给 <td> 或 <code><th>：设 <code>height + line-height（值相等）+ vertical-align: middle
• 必须加 box-sizing: border-box，否则 padding 会突破设定高度
• 禁用默认上下内边距：padding: 0 8px（左右留白，上下清零）

table-layout: fixed 是稳定高度的前提

默认的 table-layout: auto 会让浏览器先读内容再算列宽行高，导致高度随内容浮动、height 设置失效。尤其当某列有长文本或图片时，整行会被顶高。

实操建议：

• 给 <table> 加 <code>table-layout: fixed
• 配合显式列宽：<col width="120"> 或 CSS 中 col { width: 120px }
• 此时 <td> 的 <code>height 才真正“锁住”——哪怕内容溢出，高度也不变（需额外处理溢出）
• 注意：table-layout: fixed 下，<th> 文字换行可能被截断，建议加 <code>white-space: normal

  多行内容怎么不撑高？用 max-height + overflow 组合

  line-height 只对单行有效；一旦单元格里有换行、<br>、<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 或图片，高度立刻失控。这时候靠 height 已经没用。

  实操建议：

  • 设 max-height: 80px + overflow: hidden 截断超长内容
  • 需要省略号？补上 display: -webkit-box + -webkit-line-clamp: 2 + -webkit-box-orient: vertical
  • 若要保留可滚动，改用 overflow-y: auto，但需限制容器高度（如父 <td> 设 <code>height: 80px）
  • 避免对 <tr> 设 <code>max-height——它不生效，只作用于块级元素

    响应式场景下别硬写 height，改用 min-height 和媒体查询

    固定 height 在小屏上容易造成内容被裁、滚动困难；在大屏上又显得空荡。真正健壮的做法是让高度“有底线、无上限”。

    实操建议：

    • 表格整体用 min-height: 300px，保证最小可用空间
    • 关键行（如表头）用 min-height: 48px，兼顾文字大小与触摸目标
    • 移动端加媒体查询：@media (max-width: 768px) { td { padding: 6px 4px; } }
    • 慎用百分比高度（如 height: 50%）——它依赖父容器高度，而表格父容器常为 auto，结果就是 0

    最易被忽略的一点：所有高度控制都建立在内容“不意外撑开”的前提上。图片没设 max-width: 100%、字体加载延迟导致重排、甚至 font-display: swap 引起的跳变，都会让预设高度瞬间失效。上线前务必用真实数据+不同设备验证。

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