仅设 table-layout: fixed 无效，必须配合 <col> 元素、首行单元格 width 或表格显式 width 才能定宽；<col> 最可靠，优先使用 px 单位；内容溢出需按场景设置 white-space、overflow-wrap 等；响应式建议用 overflow-x: auto 包裹表格。
为什么只写 table-layout: fixed 没用
浏览器不会凭空知道列宽该是多少。table-layout: fixed 只是启用固定布局算法，它本身不提供任何宽度值。如果不给列指定宽度来源，表格会退回到按内容最小宽度撑开——看起来和 auto 没区别。
必须配合以下任一方式才能真正“定宽”：
-
<col>元素（推荐）：写在<table>开头，语义清晰、优先级最高 - 第一行的
<th>或<td>上设width（如style="width: 150px"） - 给
<table>显式设width（比如width: 100%），再配合百分比<col width="20%">
漏掉其中任意一项，fixed 就只是个摆设。
<col> 和第一行 width 哪个更可靠
<col> 是唯一能干净定义列轨道的方式。它在渲染前就参与布局计算，不受内容、min-width 或父容器约束干扰。
立即学习“前端免费学习笔记（深入）”；
而第一行单元格上的 width 容易被覆盖：
- 长单词或无空格 URL 触发浏览器最小宽度保护（哪怕写了
width: 80px，实际可能显示成 120px） - 如果第一行有
colspan，该单元格的宽度会参与列宽分配，但后续列可能错位 - 样式优先级高时（比如某个
td:nth-child(2)的规则），可能意外重置宽度
所以优先用 <col width="120">，数值单位用 px 最稳；百分比仅在 table 有明确 width 时才可预测。
文字溢出直接破坏等宽效果怎么办
等宽表格崩坏，90% 出现在内容层：长文本不换行、省略号不生效、行高突变导致边框错位。
关键要分清场景选处理方式：
- 单行截断 + 省略号：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，且<td>必须是display: block或inline-block，并设max-width - 多行自动换行（含无空格长串）：
word-break: break-all;或word-wrap: break-word;（后者已废弃，建议用overflow-wrap: break-word;） - 中文/中英混排安全换行：
white-space: normal; overflow-wrap: break-word;，同时确保<td>有明确宽度（来自<col>或第一行）
漏掉 white-space 或没设 display，text-overflow 就是死代码。
移动端适配和响应式陷阱
table-layout: fixed 在小屏上反而更容易出问题：列宽写死后，内容挤不下、横向滚动失控、缩放错乱。
几个硬性限制得提前接受：
-
<col>不支持媒体查询，不能用 CSS 动态改宽度 - 列宽一旦由
<col>或第一行定义，后续所有数据都得适应它——后端返回超长字符串时，前端 CSS 已无力回天 - 真要做响应式，要么用 JS 监听宽度动态重写
<col>的width，要么直接换 CSS Grid / Flex 布局
最务实的做法：把 <table> 包进 overflow-x: auto 容器里，宁可横向滚动，也别让列宽失守。这是目前兼容性最好、可控性最强的兜底方案。
