需设 table-layout: fixed 并配合 box-sizing: border-box、min/max-width 等控制宽度；或改用 grid/flex 模拟表格。本质是协调表格渲染逻辑与 CSS 盒模型差异。
表格单元格宽度难控制，本质是 table 布局的固有特性 与 CSS 盒模型存在差异：table 默认按内容自适应、自动均分剩余空间，且 width 在 td/th 上常被忽略或表现异常。要真正掌控宽度，需同时理解表格渲染逻辑和盒模型限制，并合理组合使用。
明确 table-layout: fixed 是关键前提
默认的 table-layout: auto 会让浏览器遍历全部内容后才计算列宽，导致指定的 width 失效或被重排。必须显式设置：
- 在
table元素上设置table-layout: fixed - 此时列宽由第一行（
col或首行th/td）的width决定，后续行不再影响列宽 - 配合
col标签可更清晰地定义列宽（如td更可靠
避免 width 与 padding/border 冲突
当给 td 设了 width，又加了 padding 或 border，实际占用空间会超出设定值——这是标准盒模型行为。解决方法：
- 对
td设置box-sizing: border-box，让width包含 padding 和 border - 或统一用
min-width替代width，保留弹性空间，避免内容撑破 - 慎用
white-space: nowrap强制不换行，它会让长文本直接撑开列宽，破坏预设布局
用 min-width + max-width 组合实现“柔性约束”
纯固定宽度易在响应式场景下失效。更稳妥的方式是结合最小与最大限制：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 80px防止列过窄，文字被截断或挤压 -
max-width: 200px防止长内容（如 URL、日志）无限拉宽整列 - 再配
overflow: hidden; text-overflow: ellipsis; white-space: nowrap实现安全截断
替代方案：用 display: grid / flex 模拟表格语义
若业务允许脱离原生 table 标签，可用现代布局替代：
- 用
div+display: grid，通过grid-template-columns精确控制每列宽度（支持fr、minmax()等） - 语义化不足时，加
role="table"、role="row"、role="cell"提升可访问性 - 适合数据展示类场景，但需自行处理表头冻结、跨列/跨行等复杂功能
table-layout，再用盒模型规则收口细节。固定布局打底，柔性约束兜底，必要时跳出 table 本身——思路理清了，宽度就不再“飘”。 
