必须设 table-layout: fixed 且 width: 100%，用 定义左侧固定宽（如 200px），右侧留空；左侧 td 加 white-space: nowrap、overflow: hidden、text-overflow: ellipsis；右侧 td 加 word-break: break-word、min-width: 0。

用 table-layout: fixed 控制列宽分配

默认表格是自动计算列宽（table-layout: auto），左侧列内容一长，右侧就挤没了。必须显式设为 fixed，才能让列宽按 col 或第一行 td 的宽度定义生效。

DeepBI DHTML 页面生成器

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

下载

关键点：

• 给 <table> 加 <code>style="table-layout: fixed; width: 100%;"
• 用 <col> 标签定义左侧列宽度（比如 <col style="width: 200px;">），右侧列不设宽，留空即可
• 第一行 tr 的 td 宽度会覆盖 <col>，所以别在第一行写 width 属性

左侧固定列需配合 white-space: nowrap 和 overflow: hidden

光设宽度不够——如果左侧内容超长，文字会撑开列宽或换行，破坏“固定”效果。

实操建议：

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

• 左侧 td 加 style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
• 避免用 word-break: break-all，它会强行断词，影响可读性
• 若需支持点击展开详情，保留完整文本但视觉截断，text-overflow: ellipsis 是最稳妥选择

右侧自适应列要防止单元格内容撑破布局

右侧列不设宽，浏览器会尽量压缩它来适配左侧，但遇到长单词、URL 或未换行的英文串，依然会突破容器。

解决方案：

• 右侧 td 加 style="word-break: break-word; min-width: 0;"
• min-width: 0 很关键：它允许该单元格在 flex 或 table 布局中真正收缩到内容最小宽度以下（否则浏览器会按内容最小尺寸卡住）
• 避免只用 overflow: hidden，那样会直接裁掉内容，用户看不到完整信息

注意 border-collapse 对宽度计算的影响

如果表格用了 border-collapse: collapse（常见于带边框的表格），边框会叠加进列宽计算，导致左侧固定宽度实际变窄约 1–2px（取决于边框粗细）。

应对方式：

• 左侧 <col> 宽度预留边框空间，比如需要净宽 200px，设 width: 202px（含左右各 1px 边框）
• 或者统一用 border-collapse: separate; border-spacing: 0;，这样宽度计算更直观
• 调试时用浏览器开发者工具检查 computed width，别只看 style 里写的值
实际布局稳定性取决于这三处是否协同：table-layout: fixed 启动列宽控制机制，<col> 定义基准，min-width: 0 和 word-break 让右侧真能缩。少一个，都可能在某个数据场景下崩掉。