根本原因是img默认不响应容器宽度且与td对齐逻辑冲突；需同时控制图片缩放（max-width:100%;height:auto）、单元格对齐（vertical-align:middle）和表格列宽计算（table-layout:fixed+width:100%+col宽度定义）。
图片在表格里总被拉伸或错位怎么办
根本原因是 img 默认不响应容器宽度，且和 td 的对齐逻辑冲突。直接写 <img src="x.jpg"> 放进表格，小屏下要么溢出，要么被压缩变形，文字还可能上跳。
必须同时控制三件事：图片自身缩放、单元格内容对齐、表格列宽计算逻辑。
-
img加max-width: 100%; height: auto;—— 禁止撑破单元格，保持比例 -
td设vertical-align: middle;，img加vertical-align: middle;—— 消除基线错位 - 整个
table必须设table-layout: fixed; width: 100%;，否则列宽随内容跑偏 - 至少一个
<col>或首行<th>要带明确宽度，比如<col style="width: 20%">
想让表格+图片并排但不破坏语义怎么办
别把图片塞进表格单元格里硬凑——尤其是当图片是说明图、示意图或品牌 logo 时。表格只该承载二维结构化数据；图片属于独立视觉元素，混在一起会让响应式逻辑缠死。
正确做法是用外层容器做布局分隔，让表格和图片成为同级兄弟元素。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex包裹<table>和<img>，加gap控制间距 - 给
img设固定尺寸或aspect-ratio+object-fit: cover，避免加载塌陷 - 小屏下用
@media (max-width: 768px)把 flex 方向改为 column，图片自然落到表格下方 - 禁用
float—— 它在 flex 容器里无效，还会干扰文档流
表格列数多、又有图片时怎么防横向溢出
常见错误是只加 width: 100% 就以为万事大吉，结果 iOS 上一滑就卡顿，安卓上文字挤成一团。这不是样式没写够，而是没切断表格的默认渲染惯性。
- 外层容器必须设
overflow-x: auto和-webkit-overflow-scrolling: touch -
table加min-width: fit-content（或具体值如min-width: 1024px），防止内容被强行压缩 - 删掉所有
white-space: nowrap—— 它会让长 URL 或无空格文本顶破容器 - 图片列用
width: 60px这类固定值，而非百分比，避免小屏下反复重算 - IE11 不支持
fit-content，得回退到min-width: 1200px这类保守值
data-label 堆叠模式下图片怎么保留可访问性
当表格在手机上转成卡片式布局（tr 变 display: block），td 里的图片如果只是靠 src 显示，屏幕阅读器会读不到上下文。光靠 alt 不够，因为表头语义丢了。
- 每个含图片的
td加data-label，比如<td data-label="缩略图"><img ...></td> - CSS 中用
::before { content: attr(data-label) ": "; }插入说明文字 -
img的alt仍要写具体内容，如alt="红色运动鞋正面图"，不能只写“图片” - 避免用背景图方式放图 ——
background-image对无障碍完全不可见
div + grid；什么时候图片该进单元格，什么时候必须抽出来。一旦列数 ≥ 4 或字段含非结构化内容（比如带操作按钮的图片列），就该考虑放弃表格，改用语义更清、响应更稳的现代布局方案。 
