textarea设width:100%无效，因table-cell内百分比宽度无法解析、box-sizing未设border-box、父td及table缺显式宽度；需同时满足td可伸展、textarea盒模型可控、表格布局可预测。

直接给 <textarea></textarea> 设 width: 100% 通常无效——它默认不继承父 <td> 的宽度，且受表格布局、盒模型和内边距干扰严重。 <h3>为什么 <code><textarea></textarea> 不会自动撑满 <td> <p>表格单元格默认是 <code>table-cell 显示模式，而 <textarea></textarea> 是替换元素，其百分比宽度在 table-cell 内无法正确解析；加上浏览器对 <textarea></textarea> 的默认 border 和 padding 未归入 width 计算，进一步导致溢出或收缩。

财经HTML高端海报生成

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

下载

• <td> 没设 <code>width 或 min-width，父宽不可计算，100% 就失去参照
• <textarea></textarea> 缺少 box-sizing: border-box，实际宽度 = content + padding + border
• 表格用了 table-layout: fixed 但没配 <col> 或首行 width，列宽坍缩成最小内容宽

让 <textarea></textarea> 真正撑满的 CSS 组合

必须同时满足三件事：父 <td> 可伸展、<code><textarea></textarea> 盒模型可控、表格布局可预测。

• 给 <td> 加 <code>width: 100%（或显式 min-width），并确保其父 <table> 有明确宽度（如 <code>width: 100%）
• 给 <textarea></textarea> 加：display: block; width: 100%; box-sizing: border-box;
• 若表格启用了 table-layout: fixed，务必用 <col> 或首行 <th>/<code><td> 声明列宽，否则 <code><td> 宽度仍可能坍缩 <p>示例片段：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <pre class='brush:php;toolbar:false;'>&lt;table style=&quot;width: 100%; table-layout: fixed;&quot;&gt; &lt;col width=&quot;30%&quot;&gt; &lt;col width=&quot;70%&quot;&gt; &lt;tr&gt; &lt;td&gt;备注&lt;/td&gt; &lt;td&gt;&lt;textarea style=&quot;display: block; width: 100%; box-sizing: border-box; min-height: 80px;&quot;&gt;&lt;/textarea&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre> <h3>移动端和 Safari 下的常见坑</h3> <p>iOS Safari 对 <code><textarea></textarea> 的 100% 渲染更敏感，尤其在缩放或地址栏收起时容易错位。
  • 避免仅靠 rows 属性控制高度，它只是字符行数提示，不保证视觉高度；改用 min-height + line-height 计算
  • 不要设 resize: vertical 后就不管 max-height，用户拖拽可能撑破 <td> 边界 <li>如果父容器用了 <code>vw 单位（如 width: 100vw），注意 iOS 上滚动条会吃掉约 17px，导致 <textarea></textarea> 实际超宽

  最易被忽略的是：哪怕所有 CSS 都写对了，只要 <table> 外层容器没设 <code>width 或 max-width，<textarea></textarea> 的 100% 就永远找不到“100% 谁”。这个父宽链必须完整、显式、无中断。