textarea在td中height失效，因表格布局优先级高于其自身样式；须通过table-layout:fixed、td显式设高（height+line-height+box-sizing:border-box+padding:0）、textarea绝对定位或flex布局实现可靠高度控制。

直接给 <textarea></textarea> 设 height 或 rows 不可靠——它会被表格单元格的渲染规则覆盖，最终高度由 <td> 的 CSS 高度、<code>line-height 和 box-sizing 共同决定。

为什么 <textarea></textarea> 在 <td> 里不听 height 指令<p>表格单元格默认用 <code>table-layout: auto，浏览器先读内容再算尺寸；<textarea></textarea> 的 height 属性会被 <td> 的包裹容器高度“截断”或“拉伸”。哪怕你写了 <code>style="height: 120px"，只要 <td> 没锁高，<code><textarea></textarea> 就可能被压缩成一行，或撑开整行导致表格变形。

• 删掉 <textarea></textarea> 上的 height 内联样式——它和表格布局冲突，纯属干扰项
• 不要依赖 rows 控制默认高度：字体缩放、zoom、系统设置都会让它错位（比如 rows="4" 在 macOS Safari 下实际可能只显示 3 行）
• <td> 必须显式设高：用 <code>height + line-height + box-sizing: border-box + padding: 0 四件套，否则 <textarea></textarea> 没有稳定“容器”可依附

  <td> 怎么给 <code><textarea></textarea> 提供可靠容器高度

  关键不是调 <textarea></textarea>，而是让 <td> 成为一个尺寸确定、不随内容浮动的“盒子”。<ul><li>给 <code><table> 加 <code>table-layout: fixed —— 否则列宽/行高全靠内容推算，<textarea></textarea> 一输入就顶高整行

  给 <td> 设 <code>height: 100px + line-height: 100px（值相等），再加 vertical-align: middle，确保单行文本居中且不撑高

  必须写 box-sizing: border-box 和 padding: 0 —— 否则 <textarea></textarea> 的 padding 会额外加在 <td> 高度外，导致溢出或滚动条 <li>如果要支持多行输入，<code><td> 改用 <code>min-height: 100px 而非 height，并配 max-height: 200px + overflow: hidden 防止失控

  怎么让 <textarea></textarea> 默认填满 <td> 高度<p>让 <code><textarea></textarea> 自适应父容器高度，不能靠 height: 100%（表格单元格中 100% 无效），得用绝对定位或 flex 布局。

  • 最简方案：给 <td> 加 <code>position: relative，<textarea></textarea> 加 position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%
  • 兼容性更好方案：把 <td> 设为 <code>display: flex; align-items: stretch，<textarea></textarea> 设 flex: 1; min-height: 0（避免 Firefox 下 flex 子项最小高度卡死）
  • 务必加 resize: none —— 否则用户拖拽会破坏高度逻辑，尤其在 Chrome 中拖完后 scrollHeight 计算失真
  • 别忘了 box-sizing: border-box 在 <textarea></textarea> 上也得写，否则边框和内边距会突破容器

  动态自适应场景下容易漏的坑

  如果后续还要让 <textarea></textarea> 随输入内容自动撑高（比如编辑态切换），初始高度只是起点，JS 逻辑必须和表格布局协同。

  
  Wechat Article Html
  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
  下载
  • input 事件中重设高度前，必须先执行 textarea.style.height = 'auto' —— 否则旧 height 值会污染 scrollHeight 计算，iOS Safari 尤其明显
  • 不要在 <tr> 上设 <code>height 并期望控制 <textarea></textarea> 高度——Chrome 完全忽略，Firefox 表现不可控，标准不支持
  • 如果表格用了 colgroup 或 col，确保列宽固定（如 <col width="200">），否则 table-layout: fixed 下文字换行位置飘移，间接影响 <textarea></textarea> 视觉高度
  • IE11 需单独处理换行符：用 value.replace(/\r\n/g, '\n') 再计算 scrollHeight，否则回车后高度虚高

  真正难的不是写几行 CSS，而是理解表格渲染机制对子元素的约束力——<textarea></textarea> 在表格里从来不是独立个体，它的高度永远是 <td>、<code><tr>、<code><table> 三层布局博弈的结果。漏掉任意一层的控制，都会在某个浏览器或某种输入下突然失效。</table>

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