table-layout: fixed 是唯一能真正锁住列宽的方案，必须配合 显式设宽或首行单元格 width、表格自身 width 声明，以及 word-break 或 text-overflow 等内容截断/换行控制，否则仍会被长内容撑开。
table-layout: fixed 是唯一能真正锁住列宽的 CSS 属性
不加 table-layout: fixed，哪怕你给 <col> 设了 width="120"，或者给 <td> 写了 <code>width: 100px，内容一长照样撑开——浏览器默认按内容重算列宽，width 只是“建议值”。table-layout: fixed 才强制按你定义的宽度（或比例）分配空间，无视内容长度。
必须配合以下至少一项才有效：
-
<col>标签显式声明列宽，例如<col width="120"> <col> <col width="80">；<col>的width优先级高于<th>/</th> <td> 的 CSS <code>width - 给
<table> 设置明确的 <code>width（如width: 600px或width: 100%），否则fixed无基准可依 - 加上
word-break: break-all或word-wrap: break-word，否则超长英文/数字串仍会撑破单元格 - 允许单词内换行：
word-break: break-all（最常用，兼容性好） - 仅在必要时换行（保留单词完整性）：
word-wrap: break-word（旧版 IE 需用overflow-wrap: break-word） - 想截断加省略号：
overflow: hidden; white-space: nowrap; text-overflow: ellipsis，但需同时设width（块级上下文） - 图片/iframe 等替换元素也要管：
max-width: 100%; height: auto，否则它们会强行撑高整行 - 固定宽度：
min-width: 400px; max-width: 400px; width: 400px（三者都写，防某些 UA 忽略单侧） - 固定高度：
min-height: 100px; max-height: 100px; height: 100px，尤其对<td> 有效 <li>表格整体也建议加：<code>min-width: 100%; max-width: 100%，防止父容器收缩时变形 - 整个表格尺寸稳定，靠的是
table-layout: fixed+col宽度 +word-break组合，不是靠禁用某个伪手柄 - 别在
<table> 上写 <code>resize，它不支持该属性，CSS 验证器会报错 实际最难处理的是混合内容：既有长文本又有图片还有嵌入 iframe。这时候光靠一套 CSS 很难全覆盖，得逐层加约束——table锁布局，td控尺寸，img限大小，textarea去手柄，漏掉任何一层都可能破功。
td 内容过长时怎么不撑开、也不溢出？
只设 width 和 table-layout: fixed 还不够。中文换行正常，但连续无空格字符串（如长 URL、Base64、UUID）会直接突破边界。这时得靠文本截断或强制换行：
为什么只写 width/height 不够，还得加 min/max？
单纯写 width: 400px; height: 100px 在移动端缩放、字体放大或某些浏览器渲染下会失效。比如 iOS Safari 缩放 150% 时，height 可能被忽略，导致行高暴增。
稳妥做法是把宽高“锁死”：
resize: none 对 table 没用，别乱套
resize: none 只作用于可拉伸的表单元素（如 <textarea></textarea>、<input type="text">），对 <table> 或 <code><td> 完全无效——表格本身没有原生拖拽手柄。网上有人误套这个属性，结果毫无作用。
<p>真正要防“拉伸”，是指防内容撑开、防用户拖大 textarea 影响表格布局。所以：</p>
<ul>
<li>表格内部若有 <code><textarea></textarea>，必须单独加 resize: none，并配 min-height/max-height
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
