table-layout: fixed 是唯一能强制等宽的方案，必须设在<table>上并配显式宽度、<col>或首行单元格width，否则width设置无效；<col>最稳定，须紧接<table>后且仅支持width。
table-layout: fixed 是唯一能强制等宽的方案
不加 table-layout: fixed，所有 CSS 的 width 设置都可能被浏览器忽略——因为默认的 table-layout: auto 会扫描全部内容再算列宽，根本没法“等宽”。这个属性必须写在 <table> 元素上，不能只写在 <td> 或 <th> 上。
常见错误现象：写了 td { width: 25% } 却发现外侧列更宽，或者小屏下突然错位。本质是没启用 table-layout: fixed，或者启用了但没配齐其他必要条件。
-
table必须有显式宽度（如width: 100%或width: 600px），否则fixed失去计算基准 - 列宽依据优先级：
<col>> 第一行<th>/<td>的width> 均分；缺任一，就退化回内容驱动 - 如果第一行有合并单元格（
colspan），会影响后续列宽推导，尽量避免
用 <colgroup><col> 控制列宽最稳定
比靠 <th> 或 <td> 设 width 更可靠：<col> 不依赖内容、不依赖首行结构，语义清晰，IE8+ 全支持。
注意：<col> 只能设 width，不能设背景、边框、padding —— 这些得写在 <td>/<th> 上；而且 <colgroup> 必须是 <table> 的**直接子元素**，紧跟在 <table> 开始标签后、<thead> 前。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写法必须是
<col style="width: 25%">，<col width="25%">已被现代浏览器静默忽略 - 四列等宽可写四个
<col style="width: 25%">；百分比生效前提是table有明确宽度（如width: 100%） - 用
span要小心：<col span="2" style="width: 200px">只会让第一列宽 200px，第二列不会继承
为什么 tbody td { width: 1% } 没用
这个写法几乎无效：1% 是个极小基准值，table-layout: fixed 下浏览器常直接归一化处理，列宽仍由首行决定，尤其当表头含图片时，外侧列会被撑开。
正确做法是统一给 <th> 和 <td> 设 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> 里、用了废弃的 width 属性而非 style、或者忘了给 <th> 同样设宽。这些地方一漏，整张表就回到“内容撑开”的老路上。 
