多张图片在表格单元格中默认竖排，需通过inline-block/inline显示、vertical-align对齐、移除空白符或flex布局实现并排；推荐用flex+gap+align-items，并配合table-layout:fixed和max-width确保响应式兼容。
单元格里直接放多张 <img> 标签就行，但默认会换行
HTML 表格单元格（<td> 或 <code><th>）本身不限制内容数量，放几张 <code><img> 都可以。问题出在浏览器默认把 <img> 当作块级或内联元素处理——尤其在老版本渲染中，<img> 默认有换行行为或空白间隙，导致图片竖着排或中间有空隙。
常见现象：<td>
<img src="a.jpg"><img src="b.jpg">
</td> 渲染出来是上下叠放，而不是并排。
- 加
display: inline-block或保持默认display: inline（<img>原生是 inline）即可水平排列 - 用
vertical-align: middle对齐基线，避免底部留白 - 移除
<img>间的换行符或空格（HTML 中的空白符会被合并成一个空格，影响布局） - 若图片尺寸不一致，建议统一设
height或max-width，否则容易错位
用 <div> 包裹 + <code>display: flex 是最稳的并排方案
靠 <img> 自带 inline 行为容易受 HTML 缩进、父容器字体大小（影响 inline 元素间隙）干扰。用 <div> 做一层容器，再用 Flex 布局，控制力更强、兼容性也够（IE11+ 支持 <code>flex）。
示例代码：
<td>
<div style="display: flex; gap: 4px; align-items: center;">
@@##@@
@@##@@
@@##@@
</div>
</td>
-
gap比手动加margin更干净，且不会影响首尾外边距 -
align-items: center确保所有图片垂直居中，不管原始高度是否一致 - 如果要响应式缩放，建议用
max-width: 100%+height: auto，而不是固定width/height
IE11 下 flex 不生效？用 white-space: nowrap + inline-block
IE11 对 gap 和部分 flex 属性支持不全（比如 gap 完全不识别），这时退回更保守的方案：禁用换行 + 强制内联块。
示例：
<td style="white-space: nowrap;"> @@##@@ @@##@@ </td>
-
white-space: nowrap阻止内部换行，哪怕图片宽超单元格也会溢出（需配合overflow: hidden或设max-width） - 每张图加
vertical-align: middle，否则文字基线对齐会导致高低不一 -
margin-right替代gap控制间距，最后一张图记得去掉右边距（或用 :last-child）
图片太多撑破表格？必须设 table-layout: fixed + 单元格宽度
默认表格是 table-layout: auto，列宽由内容撑开——多张图片叠加很容易让整列变宽，破坏布局。尤其在响应式页面里，这会让表格横向滚动或挤垮其他列。
- 给
<table> 加 <code>style="table-layout: fixed; width: 100%;" - 给对应
<th> 或 <code><td> 设明确宽度，如 <code>width: 120px或min-width: 80px - 图片用
max-width: 100%+height: auto，确保缩放不溢出 - 必要时加
overflow: hidden或text-overflow: ellipsis（对图片无效，但可配合伪元素做遮罩）
真正麻烦的是动态图片数量不确定时——这时候光靠 CSS 不够，得结合 JS 计算总宽或限制显示张数，比如只展示前 3 张，其余用 +N 文字提示。
