用<table>做照片墙需设table-layout:fixed并用<col>定义列宽，图片须包裹容器、设display:block和object-fit，避免baseline对齐空白及box-sizing问题，嵌套或合并单元格时应改用CSS Grid。
用 <table> 做照片墙不是推荐方案，但如果你受限于旧系统、CMS 或必须兼容 IE8–9，它确实能强制等列宽和对齐——关键在于绕过表格默认的“内容撑开”行为。
为什么 table-layout: fixed 是硬性前提
浏览器默认按内容自动计算列宽，哪怕你写了 width: 25%，只要某张图特别宽或文字多，整列就会被撑开。只有启用 table-layout: fixed，<col> 或 <th>/<td> 的 width 才真正生效。
-
table必须显式设table-layout: fixed，不能依赖继承 - 列宽建议统一写在
<col>标签里（语义清晰、优先级高），例如：<col width="25%"><col width="25%"><col width="25%"><col width="25%">
- 如果不用
<col>，则需给所有<th>和<td>同时设width: 25%，且父<table>宽度不能是auto
图片如何在 td 中保持等比例不拉伸
表格单元格本身不控制子元素长宽比，必须靠 CSS 容器 + object-fit 或 aspect-ratio 双重约束。否则图片会按原始尺寸溢出或压缩变形。
- 给
<td>设固定高度（如height: 200px）或使用min-height配合aspect-ratio -
img必须设display: block; width: 100%; height: 100%，再加object-fit: cover（裁剪填满）或contain（完整显示） - 现代项目优先用
aspect-ratio: 4/3或16/9，但注意 Safari 15.4+、Chrome 88+ 才稳定支持；旧版需回退到padding-top技巧 - 避免只设
max-width: 100%—— 它无法防止高度塌陷，尤其当图片原始宽高比差异大时
常见错误：图片错位、留白、响应失效
这些问题几乎都源于表格模型与图片渲染的耦合冲突，不是代码漏写，而是机制误用。
立即学习“前端免费学习笔记（深入）”；
-
<img>外层没包<div>容器：直接塞进<td>会导致垂直对齐异常（默认 baseline 对齐，产生底部空白） - 忘记
box-sizing: border-box：当加padding或border时，width: 25%会被撑超 - 用了
vertical-align: top却没同步设img { display: block }：行内元素的 vertical-align 在表格中行为复杂，易引发意外间隙 - 媒体查询写在
<td>上而非<table>：表格布局的响应式必须从容器宽度切入，单个单元格断点无效
真正麻烦的不是写法，而是表格一旦嵌套、合并单元格（rowspan/colspan），等比例逻辑就彻底失效——这时候别硬扛，该切 grid 就切。
