直接用table做相册易错位变形，因默认table-layout:auto按图片尺寸自适应行列，导致网格塌陷或拉伸；须同时设table-layout:fixed和width:100%才能等宽；td需固定高+vertical-align:middle，图片需object-fit:cover+overflow:hidden约束。
为什么直接用 table 做相册展示容易错位、变形
因为表格默认按内容自适应列宽行高，图片尺寸不一致时，<td> 会各自撑开，导致网格“塌陷”或“拉伸”。你看到的“等宽等高”只是视觉错觉，实际 DOM 结构里每个 <code>td 高度由内部图片决定，rowspan/colspan 也容易因合并逻辑混乱而错格。
table-layout: fixed 是等宽 td 的唯一可靠前提
必须对 <table> 元素同时设置这两个 CSS 属性，缺一不可：
<ul>
<li>
<code>table-layout: fixed：让浏览器放弃内容驱动布局，改用容器宽度均分列
width: 100%：提供明确的总宽基准，否则 fixed 模式下宽度可能退化为 auto
常见错误是只加 width: 100% 却没设 table-layout: fixed，结果列宽依然随图片撑开；或者写了 table-layout: fixed 但没给 table 设宽度，导致列宽计算失效。
如何强制 td 等高且图片不溢出
仅靠表格属性无法控制行高，必须用 CSS 约束 td 和其子元素：
- 给
td设固定高度（如height: 200px）并配合vertical-align: middle - 图片必须包裹在
<div class="photo-wrapper"> 里，不能直接放 <code>td中 -
.photo-wrapper设height: 100%+overflow: hidden - 图片本身用
object-fit: cover+width: 100%+height: 100% - 用独立的
<div class="featured"> 区域替代合并单元格 <li>把“大图”从表格中抽离，用绝对定位或 Flex 布局叠加在网格上方</li> <li>如果必须嵌入表格，优先用 CSS Grid 替代 <code>table，语义和控制力都更强
漏掉 overflow: hidden 或 object-fit，图片就会突破 td 边界；设了 height 但没配 vertical-align: middle，图片会贴顶显示。
合并单元格（rowspan/colspan）在相册里基本没用
相册是规则网格，每个图片占一个格子。强行用 rowspan="2" 拉大某张图，会破坏整行结构，后续 tr 行数必须严格匹配，稍有差池就错行。真实项目中更稳妥的做法是：
表格的本质是结构化数据容器，不是 UI 布局引擎。当你要做响应式缩略图墙、悬停放大、懒加载时，table 的 DOM 层级和渲染限制会让你反复卡在 td 内边距、换行、垂直居中这些细节上。
