table-layout: fixed是唯一能真正锁定列宽的CSS机制，必须设在<table>上，配合显式width、<col>或首行单元格width定义列宽基准，并手动控制文本换行或截断行为。
直接用 table-layout: fixed，其他方式基本无效——这是唯一能真正锁定列宽的 CSS 机制，不依赖 JavaScript，也不需要改 HTML 结构。
为什么 width 在 <td> 上经常失效？
因为浏览器默认用 table-layout: auto，此时 <td> 的 width 只是“建议值”，一旦内容（比如长 URL、无空格字符串）超出，整列立刻被撑开。哪怕你写了 width: 100px，它也只在“刚好够用”时起作用。
关键点在于：table-layout: fixed 必须显式设在 <table> 元素上，且不会继承；后续所有列宽控制都依赖它启用后的规则。
-
<col>或第一行<th>/<td>的width才会被当作列宽依据 - 第二行及之后的
<td>上设width会被完全忽略 - 没设任何宽度？那所有列等分
<table>的总宽，但内容仍可能溢出
如何让固定宽度下的长文本不撑破单元格？
开启 table-layout: fixed 后，<td> 默认不换行，超长内容会横向溢出甚至拖出滚动条。必须手动加文本控制样式：
立即学习“前端免费学习笔记（深入）”；
-
word-wrap: break-word或overflow-wrap: break-word：强制在任意位置断词（适合英文/数字） -
white-space: normal：恢复正常换行逻辑（前提是容器有明确宽度） -
overflow: hidden：隐藏溢出部分（慎用，可能丢失信息） - 若要显示省略号，需组合：
text-overflow: ellipsis+white-space: nowrap+display: block+ 显式max-width
示例：
td {
word-wrap: break-word;
white-space: normal;
}
响应式场景下怎么保持列宽比例稳定？
百分比宽度在 table-layout: fixed 下才可靠。但要注意：父容器必须有明确宽度（如 width: 100%），否则百分比计算无基准。
- 推荐写法：
table { width: 100%; table-layout: fixed; } - 用
th:nth-child(1) { width: 25%; }控制各列比例，比内联style更易维护 - 小屏幕可配合媒体查询缩小字体、调整
padding，或隐藏非关键列（display: none），但别对<td>直接设min-width——它在 fixed 布局里不生效
真正容易被忽略的是：只要没在 <table> 上写 table-layout: fixed，其他所有尺寸控制都是在和浏览器默认行为博弈，结果不可控。哪怕你调了十种 white-space 组合，列宽该撑开还是撑开。
