table-layout: fixed 是唯一能强制等宽的方案，必须设在上并配显式宽度、或首行单元格width，否则width设置无效；最稳定，须紧接后且仅支持width。
table-layout: fixed 是唯一能强制等宽的方案
不加 table-layout: fixed，所有 CSS 的 width 设置都可能被浏览器忽略——因为默认的 table-layout: auto 会扫描全部内容再算列宽，根本没法“等宽”。这个属性必须写在 <table> 元素上，不能只写在 <code><td> 或 <code><th> 上。
<p>常见错误现象：写了 <code>td { width: 25% } 却发现外侧列更宽，或者小屏下突然错位。本质是没启用 table-layout: fixed，或者启用了但没配齐其他必要条件。
-
table必须有显式宽度（如width: 100%或width: 600px），否则fixed失去计算基准 - 列宽依据优先级：
<col>> 第一行<th>/</th> <td> 的 <code>width> 均分；缺任一，就退化回内容驱动 - 如果第一行有合并单元格（
colspan），会影响后续列宽推导，尽量避免 - 四列等宽可写四个
<col style="width: 25%">；百分比生效前提是table有明确宽度（如width: 100%） - 用
span要小心：<col span="2" style="width: 200px">只会让第一列宽 200px，第二列不会继承
用
比靠 <th> 或 <code><td> 设 <code>width 更可靠：<col> 不依赖内容、不依赖首行结构，语义清晰，IE8+ 全支持。
注意：<col> 只能设 width，不能设背景、边框、padding —— 这些得写在 <td>/<code><th> 上；而且 <code><colgroup></colgroup> 必须是 <table> 的**直接子元素**，紧跟在 <code><table> 开始标签后、<code><thead> 前。
<ul>
<li>写法必须是 <code><col style="width: 25%">，<col width="25%"> 已被现代浏览器静默忽略
为什么 tbody td { width: 1% } 没用
这个写法几乎无效：1% 是个极小基准值，table-layout: fixed 下浏览器常直接归一化处理，列宽仍由首行决定，尤其当表头含图片时，外侧列会被撑开。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法是统一给 <th> 和 <code><td> 设 <code>width: 25%（四列），并确保两者都设置——否则表头列宽和正文列宽可能不一致，视觉上“错位”。
- 必须同时设
thead th和tbody td的width，不能只设一边 - 加上
box-sizing: border-box，防止padding影响 25% 宽度计算 - 长文本或 URL 容易顶破边界，建议加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap控制溢出
图片响应式且尺寸统一的关键点
表格里图片尺寸不一致，往往不是列宽问题，而是图片自身没约束。仅靠 width: 100% 不够，必须配合 object-fit 和宽高比控制。
现代写法用 aspect-ratio: 16/9 最简洁；旧浏览器需降级为 padding-top 技巧（容器 + position: relative/absolute）。但无论哪种，都要确保父单元格已固定宽度（即前面几步已生效）。
-
img必须设display: block; width: 100%; height: 100%，否则object-fit不起作用 -
object-fit: cover防止拉伸变形，contain会留白，按需选 - 若图片来自用户上传，尺寸差异大，建议服务端统一裁切，前端只做兜底
table 的 width、<col> 写在了 <tbody> 里、用了废弃的 <code>width 属性而非 style、或者忘了给 <th> 同样设宽。这些地方一漏，整张表就回到“内容撑开”的老路上。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
