HTML表格内文本域宽度和高度设置技巧-html教程-PHP中文网

textarea在表格中cols/rows失效，因td的padding/border、content-box及字体差异导致尺寸计算失准；应改用CSS的width:100%、min-height+height、box-sizing:border-box和resize:none。

html表格内文本域宽度和高度设置技巧

表格内 textarea 的宽度和高度不能靠 cols 和 rows 精确控制，必须用 CSS 配合，否则在不同字体、缩放、浏览器下表现不一致。

为什么 `cols` 和 `rows` 在表格里特别容易失效

表格单元格（）默认有 padding、border 和 box-sizing: content-box，而 textarea 的 cols 是按等宽字体下字符宽度算的，rows 是按行高 × 行数估算的高度——两者都忽略父容器约束。放在表格中时，可能压缩或拉伸 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%，并确保父  没设 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：

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										

必须先设 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（默认）下， 宽度由内容撑开，textarea 的 width: 100% 可能忽大忽小；改用 table-layout: fixed 并显式设列宽更可控

cellpadding 和 cellspacing 已废弃，但若还在用，它们会增加  内边距，挤压 textarea 可用空间
表格行高（ 的 height）设得太小，会裁切 textarea 的 border 或 padding，尤其在 Chrome 中
不要给  设 vertical-align: top 后再指望 textarea 居中——它默认是基线对齐，得加 vertical-align: middle 或 align-items: center（Flex）
最易被跳过的其实是 box-sizing 和 min-height：没它们，textarea 在空值、缩放、跨浏览器场景下几乎必然错位。