HTML5中table的width/height属性已弃用，因默认table-layout: auto导致宽度由内容撑开、高度几乎无效；需用table-layout: fixed+width+控制列宽，高度改用min-height+overflow-y实现。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
table width/height 属性为什么总不生效
HTML5 已明确弃用 width 和 height 这两个 HTML 属性，浏览器（Chrome/Firefox/Safari）在 modern mode 下基本忽略它们。尤其当父容器宽度小于设定值时，<table width="600"> 会被无视；而 <code><table height="300"> 根本不会截断内容，也不会触发滚动——它只是个无效占位符。
<p>根本原因在于默认的 <code>table-layout: auto：表格宽度由内容撑开，width 只作“参考”，height 几乎无约束力。哪怕给 <tr> 或 <code><td> 设了 <code>height，也会被文本换行、行高、内边距顶破。
用 table-layout: fixed + width +
真正可控的宽度方案必须三者共存：table { width: 100%; table-layout: fixed; } 是前提。只写 table-layout: fixed 不写 width，多数浏览器会退回到自动宽度，min-width/max-width 也失效。
-
<col>必须紧跟在<table> 开始标签后、<code><thead> 前，顺序错一位就全无效 <li>示例：<code><col style="width: 120px"> <col style="width: 30%">—— 第一列固定，第二列按比例分剩余空间 - 别给
<td> 写 <code>style="width: 120px"：短文本列会被压缩，长文本列会撑爆整列 - 百分比总和超 100% 会触发横向滚动条，务必校验
- 给
<table> 设 <code>min-height: 200px，配合overflow-y: auto - 确保父容器有明确高度上下文（如
max-height: 400px），否则overflow-y不触发 - 若需精确行高控制，优先用
line-height+padding替代height，避免与内容冲突 - 对可访问性敏感的场景（如报表），不要隐藏溢出内容——滚动比截断更安全
- 单行水平排列（如
<tr> <td><img alt="HTML表格宽度高度失控的重构方法" ></td> <td>标题</td> <td><button></button></td> </tr>）→ 改用display: flex; align-items: center; gap: 12px - 多行多列网格布局 → 上
display: grid，别硬套 flex - 保留
<table> 的唯一合理场景：真实二维数据表（财务明细、API 响应列表等），且已加 <code><th scope="col"> 等语义标记 <li>检查是否存在 <code>width="100%"、valign="middle"、colspan="3"等 HTML4 属性——这些是误用信号，必须替换
高度控制别碰 height，改用 min-height + overflow-y
height 在表格上几乎无法达成“固定容器+内部滚动”的效果。现代页面中更实际的做法是放弃 height，转而用组合方式“引导”视觉高度：
立即学习“前端免费学习笔记（深入）”；
伪表格结构直接替换为 flex 或 grid
如果表格只是用来排版页头、按钮组、图标+文字等非数据场景，它就是“伪表格”，重构优先级最高：
最易被忽略的一点：即使你写了 table-layout: fixed 和 width，如果父容器本身没有明确宽度（比如 div { width: 100%; } 但没设 max-width 或 min-width），整个链路还是会失效。宽度控制从来不是单点问题，而是从容器到 <col> 的完整约束链。
