必须设 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 的宽度定义生效。

关键点：

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

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

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

  实操建议：

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

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

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

  

  DeepBI DHTML 页面生成器

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

  下载

  解决方案：

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

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

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

  应对方式：

  • 左侧
  宽度预留边框空间，比如需要净宽 200px，设 width: 202px（含左右各 1px 边框）
  或者统一用 border-collapse: separate; border-spacing: 0;，这样宽度计算更直观
  调试时用浏览器开发者工具检查 computed width，别只看 style 里写的值

  实际布局稳定性取决于这三处是否协同：table-layout: fixed 启动列宽控制机制，

  定义基准，min-width: 0 和 word-break 让右侧真能缩。少一个，都可能在某个数据场景下崩掉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！