table-layout: fixed 是使 width 属性生效的硬性前提；否则浏览器按 auto 布局，width 仅作建议，内容仍会撑开列宽。
table-layout: fixed 是 width 生效的硬性前提
不设 table-layout: fixed，所有列宽控制都不可靠。浏览器默认用 table-layout: auto，此时 width 属性（无论写在 <table>、<code><col> 还是 <td> 上）只起“建议”作用——内容一长，列宽照样被撑开。<p>必须同时满足两个条件：<code>table 元素显式声明 table-layout: fixed，且存在明确的列宽定义（来自 <col> 或首行 <th>/</th>
<td> 的 <code>width 属性或 CSS width）。
-
table-layout: fixed一旦启用，列宽就完全由定义决定，后续行内容再长也不会影响列宽 - 单独加
table-layout: fixed但没配<colgroup></colgroup>或首行宽度，表格会坍缩成一团——这是常见错误现象 - Bootstrap 等框架可能重置该属性，需检查 computed style 确认是否真正生效
优先用 <colgroup></colgroup> + <col> 控制列宽
比起直接写 width 在 <td> 或 <code><table> 上，<code><colgroup></colgroup> 更语义清晰、整列统一、支持 overflow: hidden 等样式响应。
<col> 必须放在 <table> 内、<code><thead> 前，且顺序严格对应列；<code>width 值推荐用像素或百分比，避免 em/rem（<col> 无字体上下文）。
-
<col width="120">和<col style="width: 120px">效果一致，后者兼容性略好，也更符合现代写法 - 百分比值（如
width="30%"）是相对于整个<table> 宽度计算，不是父容器<li>未声明的列会回退到自动分配，若想留一列自适应，可写 <code><col>不带 width，或用style="width: 1fr"（仅 Chrome/Firefox 支持，慎用） <td width="100"> 只影响首行，后续行同列单元格宽度可能不一致<li>某些场景下（如含超长无空格字符串），<code>min-width隐式触发，导致设定宽度失效-
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }才能实现省略号效果 - 移动端建议加
table { display: block; overflow-x: auto; }让表格横向滚动，而非强行压缩列宽 - 别依赖
width="100%"让表格填满屏幕——它受父容器 padding/margin 影响，用width: calc(100% - 2rem)更稳妥
避免直接在 <td> 或 <code><table> 上用 HTML width 属性<p><code>width 是 HTML4 遗留属性，现代项目应改用 CSS 控制。直接写 <table width="600"> 或 <code><td width="100"> 会导致结构与样式耦合，且行为不稳定：<ul><li><code><table width="100%"> 在 <code>table-layout: fixed 下可能被忽略，实际宽度由 <col> 决定
真正需要响应式时，table { width: 100% } 配合 <colgroup></colgroup> 百分比宽度更可控。
文字溢出和移动端适配要单独处理
table-layout: fixed 虽然锁死了列宽，但不等于内容就自动截断或换行。长文本、URL、英文单词仍会溢出或撑破布局，必须额外加 CSS：
最易被忽略的是：fixed 布局下，列宽一旦固定，内容自适应能力就消失了。业务若要求“某列随内容伸缩”，就得放弃 table-layout: fixed，改用 CSS Grid 或 flex 模拟表格语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
