textarea在表格中cols/rows失效，因td的padding/border、content-box及字体差异导致尺寸计算失准；应改用CSS的width:100%、min-height+height、box-sizing:border-box和resize:none。
表格内 textarea 的宽度和高度不能靠 cols 和 rows 精确控制，必须用 CSS 配合，否则在不同字体、缩放、浏览器下表现不一致。
为什么 cols 和 rows 在表格里特别容易失效
表格单元格（<td>）默认有 <code>padding、border 和 box-sizing: content-box，而 textarea 的 cols 是按等宽字体下字符宽度算的，rows 是按行高 × 行数估算的高度——两者都忽略父容器约束。放在表格中时，<td> 可能压缩或拉伸 <code>textarea，导致 cols="50" 显示不到 50 字符，rows="4" 实际只撑开 3 行。
-
cols值对中文影响极小，同一值在微软雅黑和 Consolas 下宽度差 30% 以上 - 表格设了
width="100%"或table-layout: fixed时，textarea宽度会被强制截断，cols彻底失效 -
rows不阻止垂直滚动，也不保证最小高度；空textarea可能塌成一条线
表格中设置固定宽高的可靠写法
直接给 textarea 加内联样式或 class，绕过 cols/rows 的模糊计算：
- 宽度优先用
width: 100%，并确保父<td> 没设 <code>white-space: nowrap或overflow: hidden - 高度用
min-height+height组合，例如：min-height: 80px; height: 120px;，避免塌陷又留出编辑空间 - 必须加
box-sizing: border-box，否则padding和border会让实际内容区变窄 - 禁用拖拽：
resize: none，防止用户拉歪破坏表格布局
示例：
<td style="width: 300px;"> <textarea name="desc" style="width: 100%; min-height: 80px; height: 120px; box-sizing: border-box; resize: none;"></textarea> </td>
让表格内 textarea 自适应内容高度
想随文字变高但又不突破表格行高？关键不是监听 input，而是每次计算前重置高度并用 scrollHeight：
立即学习“前端免费学习笔记（深入）”；
- 必须先设
textarea.style.height = 'auto'，再读textarea.scrollHeight，否则 iOS Safari 和 IE11 会卡住不缩 - 配合 CSS 的
min-height（如80px）和max-height（如200px），超出才滚动 - IE11 下需归一化换行符：
textarea.value = textarea.value.replace(/\r\n/g, '\n')，否则scrollHeight少算一行 - 移动端建议用
requestAnimationFrame包一层，比setTimeout(..., 0)更稳
表格布局本身对 textarea 的隐性影响
表格属性会间接干扰 textarea 渲染，这些点常被忽略：
-
table-layout: auto（默认）下，<td> 宽度由内容撑开，<code>textarea的width: 100%可能忽大忽小；改用table-layout: fixed并显式设列宽更可控 -
cellpadding和cellspacing已废弃，但若还在用，它们会增加<td> 内边距，挤压 <code>textarea可用空间 - 表格行高（
<tr> 的 <code>height）设得太小，会裁切textarea的border或padding，尤其在 Chrome 中 - 不要给
<td> 设 <code>vertical-align: top后再指望textarea居中——它默认是基线对齐，得加vertical-align: middle或align-items: center（Flex）最易被跳过的其实是
box-sizing和min-height：没它们，textarea在空值、缩放、跨浏览器场景下几乎必然错位。
