textarea必须嵌套在或内，不可直接置于下；否则浏览器自动移出导致DOM失效、样式丢失、提交为空。
直接在 <td> 里放 <code><textarea></textarea> 就行，但“可调整大小”不是默认安全行为——浏览器允许拖拽，但表格布局、CSS 覆盖、移动端兼容性会让它失效或失控。
textarea 必须放在 或
内，不能放在
下
这是最常被忽略的结构前提。如果写成：
<tr>
<textarea name="note"></textarea>
</tr>
浏览器会自动把 <textarea></textarea> 移出 <tr>，导致 DOM 找不到、样式不生效、提交时字段为空。正确写法是：
<pre class="brush:php;toolbar:false;"><tr>
<td><textarea name="note"></textarea></td>
</tr></pre>
<ul>
<li>嵌套必须发生在单元格内容层级，不是行层级</li>
<li>若用 UI 框架（如 Ant Design），真实 <code><textarea></textarea> 往往被包裹在 <div class="xxx-input"> 里，此时需定位到内部元素，而非直接选 <code>textarea
表单提交依赖 name 属性，漏写会导致后端收不到值
resize: none 不生效？先查 overflow 和选择器权重
resize: none 在 <textarea></textarea> 上写无效，90% 是因为 overflow 没配对。CSS 规范强制要求：只有当 overflow 为 auto、hidden 或 scroll 时，resize 才起作用；而 <textarea></textarea> 默认是 overflow: visible，整条声明会被浏览器静默丢弃。
立即学习“前端免费学习笔记（深入）”；
- 最低可用组合：
textarea { resize: none; overflow: auto; }
- 内联最稳：
<textarea style="resize: none; overflow: auto;"></textarea>
- 第三方库常见干扰：Bootstrap 4+ 默认加了
!important，Ant Design 的类名是 .el-textarea__inner，直接写 textarea { ... } 不匹配
- 验证是否生效：开发者工具 → Computed → 搜
resize，看最终值是不是 none
自适应高度在表格里很脆弱，慎用 scrollHeight
监听 input 事件 + scrollHeight 是常见方案，但在表格中容易崩：
const el = document.querySelector('td textarea');
el.addEventListener('input', () => {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
});
- 如果父
<td> 设了 <code>max-height 或 overflow: hidden，撑高会被剪裁，内容看不见
- iOS Safari 旧版
scrollHeight 返回值不准，可能偏小，换行后高度卡住
- 表格列宽会随内容变多突然拉宽，破坏整体对齐——尤其当多列都有自适应
<textarea></textarea> 时
- 更可控的做法：固定
min-height + max-height + overflow-y: auto，放弃“完全贴合”，换布局稳定
字体和尺寸控制要单独作用于 textarea，别靠 table 继承
表格本身设置 font-family 或 font-size 对 <textarea></textarea> 无效，它有自己的默认等宽字体和用户代理样式。必须显式定义：
- 推荐用
em 或 rem 单位，比如 font-size: 0.875rem，适配缩放和移动端
- 设
box-sizing: border-box，避免 padding 和 border 导致宽度超限
- 宽度用
width: 100% 可靠，但高度别只写 height: 100% —— 它依赖父元素有明确高度，而 <td> 默认是 <code>height: auto，结果往往为 0
- 如需统一风格，给
<textarea></textarea> 加 class，例如 <textarea class="table-textarea"></textarea>，再写 .table-textarea { font-family: system-ui, sans-serif; }
真正麻烦的从来不是怎么让 <textarea></textarea> 变大，而是它变大之后，整张表还稳不稳——列宽突变、行高错位、移动端滚动异常，这些问题比功能实现更消耗调试时间。
这是最常被忽略的结构前提。如果写成：
<tr> <textarea name="note"></textarea> </tr>
浏览器会自动把 <textarea></textarea> 移出 <tr>，导致 DOM 找不到、样式不生效、提交时字段为空。正确写法是：
<pre class="brush:php;toolbar:false;"><tr>
<td><textarea name="note"></textarea></td>
</tr></pre>
<ul>
<li>嵌套必须发生在单元格内容层级，不是行层级</li>
<li>若用 UI 框架（如 Ant Design），真实 <code><textarea></textarea> 往往被包裹在 <div class="xxx-input"> 里，此时需定位到内部元素，而非直接选 <code>textarea
name 属性，漏写会导致后端收不到值resize: none 不生效？先查 overflow 和选择器权重
resize: none 在 <textarea></textarea> 上写无效，90% 是因为 overflow 没配对。CSS 规范强制要求：只有当 overflow 为 auto、hidden 或 scroll 时，resize 才起作用；而 <textarea></textarea> 默认是 overflow: visible，整条声明会被浏览器静默丢弃。
立即学习“前端免费学习笔记（深入）”；
- 最低可用组合：
textarea { resize: none; overflow: auto; } - 内联最稳：
<textarea style="resize: none; overflow: auto;"></textarea> - 第三方库常见干扰：Bootstrap 4+ 默认加了
!important，Ant Design 的类名是.el-textarea__inner，直接写textarea { ... }不匹配 - 验证是否生效：开发者工具 → Computed → 搜
resize，看最终值是不是none
自适应高度在表格里很脆弱，慎用 scrollHeight
监听 input 事件 + scrollHeight 是常见方案，但在表格中容易崩：
const el = document.querySelector('td textarea');
el.addEventListener('input', () => {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
});
- 如果父
<td> 设了 <code>max-height或overflow: hidden，撑高会被剪裁，内容看不见 - iOS Safari 旧版
scrollHeight返回值不准，可能偏小，换行后高度卡住 - 表格列宽会随内容变多突然拉宽，破坏整体对齐——尤其当多列都有自适应
<textarea></textarea>时 - 更可控的做法：固定
min-height+max-height+overflow-y: auto，放弃“完全贴合”，换布局稳定 - 推荐用
em或rem单位，比如font-size: 0.875rem，适配缩放和移动端 - 设
box-sizing: border-box，避免padding和border导致宽度超限 - 宽度用
width: 100%可靠，但高度别只写height: 100%—— 它依赖父元素有明确高度，而<td> 默认是 <code>height: auto，结果往往为 0 - 如需统一风格，给
<textarea></textarea>加 class，例如<textarea class="table-textarea"></textarea>，再写.table-textarea { font-family: system-ui, sans-serif; }
字体和尺寸控制要单独作用于 textarea，别靠 table 继承
表格本身设置 font-family 或 font-size 对 <textarea></textarea> 无效，它有自己的默认等宽字体和用户代理样式。必须显式定义：
真正麻烦的从来不是怎么让 <textarea></textarea> 变大，而是它变大之后，整张表还稳不稳——列宽突变、行高错位、移动端滚动异常，这些问题比功能实现更消耗调试时间。
