如何在HTML表格中嵌入文本域输入框-html教程-PHP中文网

textarea塌成一条线是因inline-block与table-cell叠加导致vertical-align:baseline贴底，需加vertical-align:top、height:100%、resize:none，并用white-space:pre-wrap保留换行且自动折行。

如何在html表格中嵌入文本域输入框

textarea 塌成一条线？先 fix display 和 vertical-align

直接往 <td> 里放 <code><textarea></textarea>，浏览器默认把它当 display: inline-block 渲染，而 <td> 是 <code>display: table-cell，两者叠加后 vertical-align: baseline 会让 <textarea></textarea> 贴底对齐，内容被截断，视觉上只剩一条细线。

必须显式控制对齐和尺寸：

<td> 或 <code><textarea></textarea> 加 vertical-align: top（推荐加在 <td> 上，避免污染表单控件样式） <li> <code><textarea></textarea> 必须设 height: 100% 或至少 rows="3"，否则 scrollHeight 返回值极小（常为 0 或 18px）
若用了 box-sizing: border-box，height: 100% 才真正撑满单元格；否则要手动补偿 padding
禁用 resize: none —— 否则用户拖拽右下角会破坏表格列宽

换行不显示？white-space 是关键

不是没换行，是 HTML 渲染时把 \n 当普通空白吞掉了。哪怕你敲了回车、内容里有换行符，CSS 默认也不保留。

唯一兼顾换行保留、自动折行、不撑破列宽的方案是：

给 <textarea></textarea> 加 style="white-space: pre-wrap;"
别用 white-space: pre —— 它保留换行但不自动折行，超长文本会横向溢出
后端接收时，务必用 textarea.value 取值，而不是 innerText —— 后者会丢掉所有 \n
提交前可做归一化：textarea.value = textarea.value.replace(/\r\n/g, '\n')，尤其防 IE11 兼容问题

rows/cols 还是 CSS height/width？优先用后者

rows 和 cols 是 HTML 属性，只提供初始渲染建议，实际尺寸由 CSS 主导。现代布局中更可控、更易响应式：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

用 height + min-height（如 min-height: 80px）替代 rows，避免不同字体下行高不一致
用 width: 100% 替代 cols，让 <textarea></textarea> 自适应单元格宽度
如果需要动态高度（随内容增长），得配合 JS 监听 input 事件并重设 height，但注意避免抖动 —— 推荐用 scrollHeight + min-height 组合
移动端慎用 resize: both，横竖屏切换时易错位；固定 resize: vertical 更稳妥

name 属性漏写？表单提交就收不到值

这是最隐蔽也最高频的问题：HTML 表单提交时，只有带 name 属性的控件才会被序列化发送。没写 name 的 <textarea></textarea>，无论内容多长，后端都收不到。

其他容易忽略的点：

<textarea></textarea> 的初始内容必须写在标签体内，不能靠 value 属性 —— 它不支持 value
如果 <textarea></textarea> 在 <form></form> 外，或父容器用了 display: none，也会导致不提交（disabled 会彻底排除，hidden 属性同理）
多个 <textarea></textarea> 共享同一 name 时，后端收到的是字符串拼接（用逗号分隔），不是数组 —— 如需数组语义，得用 name="desc[]" 格式