table-layout: fixed 是固定列宽的硬性前提，必须配合表格显式宽度、<col>或首行单元格宽度定义，且<col>需为<table>直接子元素、数量与列数一致，否则列宽设置无效。
table-layout: fixed 是列宽生效的硬性前提
直接给 <td> 或 <col> 写 width 却没反应？不是 CSS 写错，而是浏览器根本没启用列宽约束机制。默认的 table-layout: auto 会无视你写的宽度，优先按内容撑开列——哪怕你写了 width: 100px，一串无空格 URL 也能把它顶到 300px。
必须显式开启：table { table-layout: fixed; }。这不是可选项，是开关。没它，<col> 的 style="width: 120px"、第一行 <th> 的 width 属性全无效。
-
table-layout: fixed启用后，列宽只由<col>或首行<th>/<td>的宽度决定，后续所有行严格对齐，内容超长也不会撑开 - 必须同时设置
table的明确宽度（如width: 100%或width: 800px），否则 fixed 没有计算基准 - 如果父容器没宽（比如
<div>默认width: auto），width: 100%就等于没设
<col> 标签位置和数量必须严格匹配
<colgroup> 不是装饰性容器，它是解析器严格校验的结构节点。塞错位置，整个 <col> 列表会被静默丢弃——DevTools 里能看到标签，但 computed styles 中完全不出现 width 值。
正确顺序：<table> → 可选 <caption> → <colgroup> → <thead> 或第一个 <tr>。任何嵌套在 <tbody>、<tr> 里的写法都无效。
立即学习“前端免费学习笔记（深入）”；
-
<col>数量必须与表格实际列数完全一致：少一个，最后一列可能塌缩为 0px（Safari 尤其明显）；多一个，多余项无作用但干扰调试 -
span="3"不是批量设宽，它只让当前<col>占据逻辑上的前三列位置，样式仅作用于第 1 列，第 2、3 列回归默认行为 - 想三列等宽 100px？必须写三个独立的
<col style="width: 100px">，别偷懒
响应式栅格别硬套 table，改用 CSS Grid + media query
用 <table> 做多列布局来实现响应式，本质是逆向使用语义元素，结果必踩坑：列宽受内容干扰、移动端换行难控、table-layout: fixed 和百分比宽度冲突频繁。真正轻量可控的方案是 CSS Grid。
基础写法：.grid-container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }。再配合媒体查询切换列数：
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
}
}
- 避免用固定像素值（如
width: 500px）定义容器宽度，改用max-width: 500px; width: 100%组合 - 确保
<head>中<meta name="viewport" content="width=device-width, initial-scale=1.0">拼写正确，否则移动端缩放失效 - Grid 的
gap属性替代传统 margin 控制间距，避免父子 margin 折叠问题
td 内容溢出时，div 包裹才是可靠兜底
当表格结构无法改动（比如第三方组件、遗留系统），又必须限制单元格内文本或输入框宽度时，在 <td> 里套一层 <div> 是最直接有效的做法。原因很简单：div 是标准块级元素，它的 width、overflow、white-space 完全遵循盒模型，不受表格自动布局干扰。
- 给
<div>设width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;，安全截断超长文本 - 内部是
<input type="text">？设width: 100%，它的参照系就是这个<div> - 避免在
<td>上用!important强顶宽度——它压不住内容撑开的本质问题，还可能破坏其他样式
复杂点在于：table-layout: fixed 虽然能锁列宽，但会让长文本直接溢出或换行失控；而 Grid 布局虽灵活，但老版本 IE 支持有限。实际项目中，得先看兼容要求再选路径，别一上来就堆 CSS 属性。
