table-layout: fixed是唯一能真正锁定列宽的css机制，必须设在上，配合显式width、或首行单元格width定义列宽基准，并手动控制文本换行或截断行为。
直接用 table-layout: fixed，其他方式基本无效——这是唯一能真正锁定列宽的 CSS 机制，不依赖 JavaScript，也不需要改 HTML 结构。
为什么 width 在 <td> 上经常失效？
<p>因为浏览器默认用 <code>table-layout: auto，此时 <td> 的 <code>width 只是“建议值”，一旦内容（比如长 URL、无空格字符串）超出，整列立刻被撑开。哪怕你写了 width: 100px，它也只在“刚好够用”时起作用。
关键点在于：table-layout: fixed 必须显式设在 <table> 元素上，且不会继承；后续所有列宽控制都依赖它启用后的规则。
<ul><li>
<code><col> 或第一行 <th>/</th>
<td> 的 <code>width 才会被当作列宽依据
<td> 上设 <code>width 会被完全忽略
<table> 的总宽，但内容仍可能溢出
<h3>如何让固定宽度下的长文本不撑破单元格？</h3>
<p>开启 <code>table-layout: fixed 后，<td> 默认不换行，超长内容会横向溢出甚至拖出滚动条。必须手动加文本控制样式：
<ul>
<li>
<code>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> 直接设 <code>min-width——它在 fixed 布局里不生效真正容易被忽略的是：只要没在
<table> 上写 <code>table-layout: fixed，其他所有尺寸控制都是在和浏览器默认行为博弈，结果不可控。哪怕你调了十种white-space组合，列宽该撑开还是撑开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
