要让单元格与视觉同宽，必须统一宽度计算基准：禁用cols属性，改用CSS控制width并配合table-layout: fixed和显式定义列宽，同时为设置display: block; width: 100%; box-sizing: border-box; resize: none;，确保二者共享同一父级宽度上下文。

DeepBI DHTML 页面生成器

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

下载

让 <table> 单元格和 <code><textarea></textarea> 视觉上同宽，不能靠猜或“看起来差不多”，必须统一宽度计算基准——核心是禁用 textarea 的 cols 依赖字体度量，转而用 CSS 控制，并与表格列宽对齐到同一套尺寸体系。

textarea 的 width 必须用 CSS 而非 cols

cols 属性只提供粗略字符数映射，受字体、字号、line-height 影响极大，和 td 的像素/百分比宽度无法对齐。比如 cols="40" 在不同浏览器下可能渲染出 320px～380px 不等的宽度。

• 删掉 cols 属性，改用 style="width: 300px;" 或 class="form-field" 配 CSS
• 若需响应式，用 width: 100% + 父容器设 max-width，避免撑破表格容器
• 注意：加 box-sizing: border-box，否则 padding 会让实际内容区变窄

表格列宽必须启用 table-layout: fixed

默认 table-layout: auto 下，td 宽度由内容决定，哪怕你给 textarea 设了 300px，表格仍可能因其他单元格内容（如长 URL、图片）把列拉宽，导致“同宽”失效。

• 在 <table> 上加 <code>style="table-layout: fixed; width: 100%;"（或固定像素值）
• 配合 <colgroup><col style="width: 300px"></colgroup> 显式定义列宽——这是唯一能稳定压住列不被内容撑开的方式
• 不要只靠 td { width: 300px }，它在 auto 模式下只是建议值，fixed 模式下又只读首行或 <col>

textarea 和 td 必须共享同一父级宽度上下文

如果 <textarea></textarea> 放在 <td> 内，但 <code><td> 本身没约束（比如没设 <code>width 或 <col>），那 textarea 的 100% 就失去参照，会按内容回退到最小宽度。

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

• 确保 <td> 所在列已通过 <code><col> 或首行 <th> 锁定宽度 <li> <code><textarea></textarea> 直接子级不加 margin，且设 display: block; width: 100%;
• 若表格嵌套在表单里，检查外层 <form></form> 或 <div> 是否有 <code>max-width 或 padding 干扰

  最易忽略的一点：表格中 <textarea></textarea> 的 resize 行为。默认可拖拽，一拉就破环宽度一致性。加 resize: none; 是基本操作，否则用户手动调整后，再刷新页面也不会恢复——这个细节常被跳过，直到 QA 提 Bug 才发现。