width="100%"或style="width:100%"失效的根源在于父容器无明确宽度且未设置table-layout:fixed；必须同时满足父容器有宽度、table-layout:fixed、正确放置三条件。

直接写 width="100%" 或 style="width: 100%" 几乎肯定失效——因为缺少两个硬性前提：父容器必须有明确宽度，且 table-layout 必须设为 fixed。

父容器没宽度，width: 100% 就是空话

浏览器计算百分比宽度时，需要一个确定的参照值。如果父容器（比如

）没设 width、max-width 或其他可计算宽度（如 flex-basis），那 100% 就退化为 auto，表格按内容撑开。

• ✅ 正确做法：
  ...
• ❌ 常见错误：
  ...
  ——
  宽度由内容决定，无参照
• ⚠️ 注意：width: 100vw 虽然能填满视口，但会忽略滚动条宽度，可能造成横向溢出

table-layout: fixed 不设，列宽就不可控

默认的 table-layout: auto 会让浏览器扫描全部行内容再分配列宽，结果就是：某列塞了个长 URL，整列被拉宽，其他列被挤塌；首行和后续行对不齐；小屏下直接横向溢出。

• ✅ 必须加：table { table-layout: fixed; width: 100% }
• ❌ 单独加 width: 100% 但漏掉 table-layout: fixed， 百分比或像素值全无效
• ⚠️ 必须紧贴 开始标签后、 前，放错位置（比如塞进 里）等于没写
  是唯一稳定定义列宽的方式
  元素能真正接管列宽控制权。
  • ✅ 推荐写法：
  （混合单位合法）
  ❌ 别用 fr 单位：
  无效， 不支持 Grid 单位
  ⚠️ 没写
  的列，会 fallback 到第一行对应 放错位置——这三个条件缺一不可，少一个，width: 100% 就只是个安慰剂。

  或

  上的 width 属性在 table-layout: fixed 下会被忽略；只有

  的 width；都没写，就坍缩成最小内容宽，常导致列过窄 内容溢出不是宽度问题，是渲染规则没配对 table-layout: fixed 锁死了列宽，但长文本、URL、连续无空格英文、未约束图片仍会撑破或溢出单元格——width 和 table-layout 对内容换行/截断毫无作用。 DeepBI DHTML 页面生成器 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur 下载 ✅ 单行截断：td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ✅ 自动换行（推荐）：td { white-space: normal; word-break: break-word; } ✅ 图片适配：img { max-width: 100%; height: auto; display: block; }，且删掉 标签上的 width/height 属性 最常被忽略的三个点：父容器没宽度、table-layout: fixed 漏写、