table-layout: fixed 是唯一能真正锁定列宽的方案，需配合 table 显式宽度、 或首行单元格宽度定义，以及 overflow/white-space 等溢出控制样式才能生效。
table-layout: fixed 是唯一能真正锁定列宽的方案
默认的 table-layout: auto 会让浏览器扫描全部单元格内容后再算列宽，只要某一行出现长 URL、Base64 字符串或连续无空格中文，整列就会被撑开——这不是 bug，是它的设计逻辑。而 table-layout: fixed 强制浏览器只看第一行（或 <col>）的宽度声明来分配列轨道，后续所有行都必须对齐，列宽从此可控。
但光写这一句没用，必须同时满足三个条件：
-
table元素本身要有明确宽度，比如width: 100%或width: 600px；否则列宽无参照基准 - 列宽定义必须来自
<col>元素或第一行的<th>/<code><td>，后续行里写的 <code>width会被忽略 - 内容溢出控制（如
text-overflow: ellipsis）必须配合white-space: nowrap和overflow: hidden，且这些样式得加在<td> 上，不是 <code><tr> 或 <code><table> <h3>col 元素比 th/td 的 width 更可靠</h3> <p>很多人给 <code><th> 写了 <code>width: 120px却发现列还是变宽了，问题往往出在：内容触发了最小宽度保护，或者table-layout: fixed没生效，又或者该<th> 所在行用了 <code>colspan，导致列宽计算错位。<col>是语义上专为定义列轨道设计的，它在渲染前就确定了宽度，不受内容、min-width或父容器约束干扰。实操建议：- 用
<col width="120">或<col style="width: 120px">，单位优先选px；百分比在fixed模式下行为不稳定 - 避免多个
<col>总宽超过table宽度，否则浏览器会按比例压缩，但不会溢出 - 如果表格有
colspan行，别让第一行参与列宽定义——改用隐藏的首行或直接靠<col>控制
text-overflow: ellipsis 在 td 上不生效的真正原因
直接给
<td> 加 <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis;没反应，不是语法错，而是缺了前置约束：表格没进fixed模式，或者table没设宽度，导致<td> 实际没有“固定宽度”这个前提。 <p>要让它生效，必须链式设置：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li><code>table { table-layout: fixed; width: 100%; } - 用
-
col { width: 150px; }（或第一行<th> 的 <code>width） td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }- 用
<col>定义基础列宽，再用媒体查询切换整个table的width或显示方式 - 小屏时把非关键列设为
display: none，而不是强行压缩 - 外层套个
<div class="table-wrapper" style="overflow-x: auto">，避免横向滚动条被截断 <li>避免在 <code>td上混用min-width和百分比，它们会冲突
注意：text-overflow: ellipsis 只对单行有效；遇到长文本需换行时，换成 word-break: break-all 或 overflow-wrap: break-word，并确保 td 有 max-width 或显式宽度。
响应式下百分比列宽为什么失效
写 th:nth-child(1) { width: 30%; } 却发现小屏上列宽乱跳，常见原因是：父容器本身没设宽度，或者 table 被包在 display: inline-table 里，又或者媒体查询没覆盖到 <col>（它不支持媒体查询）。
更稳的做法是：
最易被忽略的一点：哪怕所有 CSS 都写对了，只要 HTML 里 <thead> 和 <code><tbody> 的列数不一致（比如某行漏了 <code><th>），<code>table-layout: fixed 就会退化回 auto 模式——检查 DOM 结构比调样式更优先。
