HTML表格中textarea不能被colspan/rowspan直接合并，因其非表格单元格元素；正确做法是将textarea置于已设置colspan/rowspan的td/th内，并用CSS控制其宽高。
HTML 表格不能和 <textarea></textarea> 合并单元格 —— 它们是不同语义层级的元素，colspan 和 rowspan 只作用于 <td>、<code><th>，对表格外的 <code><textarea></textarea> 无效。
为什么不能把 <textarea></textarea> 当成表格单元格来合并
<textarea></textarea> 是表单控件，不是表格内容单元；它不能放在 <tr> 或 <code><td> 外部参与网格计算，也不能被 <code>colspan/rowspan 覆盖或拉伸。常见误解是试图这样写：
<tr> <td colspan="2"><textarea></textarea></td> <td>其他内容</td> </tr>
这看似“合并了”，但实际只是把 <textarea></textarea> 放进一个已合并的 <td> 里，<code><textarea></textarea> 本身没被合并 —— 它只是普通子元素。
<textarea></textarea> 在表格中占多列/多行的正确写法
想让 <textarea></textarea> 视觉上横跨多列？必须靠它父级 <td> 的 <code>colspan，同时控制 <textarea></textarea> 自身宽度：
立即学习“前端免费学习笔记（深入）”；
- 给
<td> 加 <code>colspan="3"，确保该行总列数仍一致（比如表头定义 4 列，那这一行就只能有 1 个colspan="3"+ 1 个普通<td>） <li>在 <code><td> 内设 <code><textarea style="width: 100%; box-sizing: border-box;"></textarea>，否则默认宽度固定，不随<td> 拉伸 <li>避免用 <code>width像素值硬写，优先用百分比或100%，配合box-sizing: border-box防止边框撑出 - 若需多行高度，靠
rows属性或 CSSheight控制<textarea></textarea>本身，不是靠rowspan“撑高” - 用
display: grid替代：把整个区域设为grid，用grid-column/grid-row精确控制<textarea></textarea>占位，语义清晰、无列数校验负担 - 放弃表格语义：若纯为视觉排版，直接用
<div> + CSS Grid/Flex，<code><textarea></textarea>当普通块级元素处理 - 保留表格语义但解耦交互：表格只负责数据结构，
<textarea></textarea>放在表格外，用 JS 关联（比如点击某行触发对应<textarea></textarea>显示）
想让 <textarea></textarea> 看起来“跨两行”？别用 rowspan 直接套它
rowspan 必须写在 <td> 上，且后续行对应列位置必须彻底留空 —— 如果你强行在第二行同一列又放了个 <code><td>（哪怕里面是空的），结构立刻错位。正确做法：
<ul><li>第一行 <pre class="brush:php;toolbar:false;"><td rowspan="2"><textarea></textarea></td></li>
<li>第二行该列位置**完全不写任何 <code><td></pre> 或 <code><th>**，连空标签都不能有
<li>如果第二行还有其他列内容，从第二列开始写，例如：<code><tr><td>右侧内容</td></tr>
真正需要“表格+文本域混合布局”时，更推荐替代方案
当需求超出原生表格能力（比如自由拖拽、响应式断行、复杂嵌套），<table> + <code><textarea></textarea> 组合会越来越难维护：
最容易被忽略的是：浏览器不会帮你校验 colspan/rowspan 是否与真实列数匹配，错一位，整张表就偏移 —— 所以每次加完属性，务必用 Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0) 过一遍所有 <tr>。</tr>
