width="100%"或style="width:100%"失效的根源在于父容器无明确宽度且未设置table-layout:fixed；必须同时满足父容器有宽度、table-layout:fixed、正确放置三条件。
直接写 width="100%" 或 style="width: 100%" 几乎肯定失效——因为缺少两个硬性前提：父容器必须有明确宽度，且 table-layout 必须设为 fixed。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
父容器没宽度，width: 100% 就是空话
浏览器计算百分比宽度时，需要一个确定的参照值。如果父容器（比如 <div>）没设 <code>width、max-width 或其他可计算宽度（如 flex-basis），那 100% 就退化为 auto，表格按内容撑开。
- ✅ 正确做法：
<div style="width: 100%; max-width: 960px"><table style="width: 100%">...</table></div> - ❌ 常见错误：
<div><table style="width: 100%">...</table></div>——<div> 宽度由内容决定，无参照 <li>⚠️ 注意：<code>width: 100vw虽然能填满视口，但会忽略滚动条宽度，可能造成横向溢出 - ✅ 必须加：
table { table-layout: fixed; width: 100% } - ❌ 单独加
width: 100%但漏掉table-layout: fixed，<col>百分比或像素值全无效 - ⚠️
<col>必须紧贴<table> 开始标签后、<code><thead> 前，放错位置（比如塞进 <code><thead> 里）等于没写 <h3> <code><col>是唯一稳定定义列宽的方式<th> 或 <code><td> 上的 <code>width属性在table-layout: fixed下会被忽略；只有<col>元素能真正接管列宽控制权。立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
<col width="120"> <col width="30%"> <col width="20%">（混合单位合法） - ❌ 别用
fr单位：<col width="1fr">无效，<col>不支持 Grid 单位 - ⚠️ 没写
<col>的列，会 fallback 到第一行对应<th> 的 <code>width；都没写，就坍缩成最小内容宽，常导致列过窄内容溢出不是宽度问题，是渲染规则没配对
table-layout: fixed锁死了列宽，但长文本、URL、连续无空格英文、未约束图片仍会撑破或溢出单元格——width和table-layout对内容换行/截断毫无作用。- ✅ 单行截断：
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; }，且删掉<img alt="HTML表格布局怎么设置自适应宽度" >标签上的width/height属性
最常被忽略的三个点：父容器没宽度、
table-layout: fixed漏写、<col>放错位置——这三个条件缺一不可，少一个，width: 100%就只是个安慰剂。 - ✅ 单行截断：
- ✅ 推荐写法：
table-layout: fixed 不设，列宽就不可控
默认的 table-layout: auto 会让浏览器扫描全部行内容再分配列宽，结果就是：某列塞了个长 URL，整列被拉宽，其他列被挤塌；首行和后续行对不齐；小屏下直接横向溢出。
