要使textarea铺满td，需三层控制：td设固定宽高且padding为0；textarea设display:block、width/height:100%、margin/border:0、padding及box-sizing:border-box；注意移动端height:100%兼容性问题。

HTML 表格里放 <textarea></textarea> 或其他表单控件时，想让它“铺满单元格”，不是加个 width="100%" 就完事——多数情况下它只占内容宽，上下留白、左右缩进、换行错位全会出现。根本原因是 <td> 默认有 <code>padding，且 <textarea></textarea> 是替换元素（replaced element），不自动继承父容器的盒模型行为。

为什么 width: 100% + height: 100% 失效

直接给 <textarea></textarea> 设 width: 100%; height: 100% 通常没用，因为：

• <td> 没设 <code>height，height: 100% 就失去参照（百分比高度必须有明确的父高）
• <textarea></textarea> 的默认 border 和 padding 会撑出额外空间，导致实际宽度超 100%
• box-sizing 默认是 content-box，宽度只算内容区，不包含边框和内边距
• 表格在 table-layout: auto 下，列宽由首行内容决定，<textarea></textarea> 的初始尺寸可能被忽略

<textarea></textarea> 铺满 <td> 的最小可行写法 <p>要让 <code><textarea></textarea> 真正贴边填满单元格，关键在三层控制：单元格尺寸固定、内容容器重置盒模型、文本域自身拉伸。



DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给 <td> 显式设 <code>width 和 height（比如 width: 200px; height: 120px），或用 <col> + <colgroup></colgroup> 控制列宽，再配合 tr { height: 100px }
• 给 <textarea></textarea> 加 display: block; width: 100%; height: 100%; margin: 0; border: 0; padding: 4px; box-sizing: border-box;
• 必须确保 <td> 的 <code>padding 为 0，否则 width: 100% 会相对于“内容区”计算，而非单元格盒边界
• 如果表格用了 border-collapse: collapse，注意 <textarea></textarea> 的 border 可能和表格边框重叠，建议统一用 border: 1px solid #999 显式定义

兼容性与移动端注意事项

在 iOS Safari 或旧版 Android 浏览器中，<textarea></textarea> 的 height: 100% 容易失效，尤其当父 <tr> 高度靠百分比或视口单位（如 <code>vh）计算时。稳妥做法是：

立即学习“前端免费学习笔记（深入）”；

• 放弃对 <tr> 或 <code><td> 使用 <code>height: 100vh，改用固定像素值或 min-height
• 用 resize: none 禁用拖拽，避免用户手动拉伸破坏布局
• 若需响应式，不要依赖 vh 驱动单元格高度，而是用容器 flex 布局 + flex: 1 控制表格整体高度，再让 <textarea></textarea> 在已知高度的 <td> 内拉伸 <li>测试时重点看：输入长文本是否触发滚动条、是否撑破单元格、焦点进入时是否意外放大（iOS 自动缩放）</li> <p>真正难的不是写几行 CSS，而是意识到：表格单元格不是普通容器，它有自己的渲染规则；而 <code><textarea></textarea> 也不是 div，它的尺寸逻辑更接近图片。两者叠加时，任何一处 padding、box-sizing 或 height 来源缺失，都会让“铺满”变成幻觉。