必须同时设置父容器宽度、table-layout: fixed 和 <col> 元素，才能使单元格内图片 width: 100% 有效；缺一不可，否则图片无法按列宽自适应缩放。
直接给单元格里的 <img> 写 width: 100% 不行——它会被表格默认布局吞掉，真正起效得靠三层配合：父容器宽度 + table-layout: fixed + 单元格内图片样式。
为什么 <td><img width="100%"></td> 常常失效
表格默认是 table-layout: auto，列宽由内容撑开，width: 100% 在 <td> 里没参照物；更关键的是，<img> 是替换元素，若父 <td> 没被强制定宽，浏览器根本不知道“100%”该算谁的。
- 只在
<img>上写width="100%"或style="width: 100%"，基本无效 -
<td>上设width属性或内联样式，在auto模式下会被忽略 - 漏掉
table-layout: fixed，哪怕<col>写了也白搭 - 父容器（比如
<div>）没设宽度，整个链路失去计算基准
table-layout: fixed 必须和 <col> 配合用
这是让单元格“有宽度可依”的唯一可靠路径。不能靠 <th> 或 <td> 的 width，必须用语义正确的 <col> 元素定义列基准。
-
<col>必须紧贴<table>开始标签后、<thead>前，放错位置（如塞进<thead>）就失效 - 支持
width="200"（px）、width="30%"，不支持fr或calc() - 没写
<col>的列，会 fallback 到第一行<th>的宽度；若<th>也没设宽，列就坍缩成最小内容宽 - 示例结构：
<table style="width: 100%; table-layout: fixed;"> <col width="150"> <col width="40%"> <col width="20%"> <thead><tr><th>ID</th><th>名称</th><th>缩略图</th></tr></thead> <tbody><tr><td>1</td><td>产品A</td><td><img src="a.jpg" style="width: 100%; height: auto;"></td></tr></tbody> </table>
<img> 样式必须加 height: auto 和 max-width: 100%
只写 width: 100% 会导致图片拉伸变形；max-width: 100% + height: auto 才能保比例缩放。但要注意，这个组合在表格里仍依赖列宽已固定。
立即学习“前端免费学习笔记（深入）”；
- 删掉
<img>标签上的width和height内联属性，否则 CSS 会被覆盖 - 若图片所在
<td>是 flex/grid 子项，需额外给<td>加min-width: 0，否则max-width不触发收缩 - 图片若带边框或 padding，记得加
box-sizing: border-box，否则总宽超列宽 - 长 URL 或无空格文本溢出时，
<td>还要配word-break: break-word或overflow-wrap: break-word
小屏下表格滚动比图片自适应更重要
当列数多、内容密，硬缩图片反而看不清文字。此时优先做响应式表格容器，而不是死磕单张图缩放。
- 给表格外层套
<div class="table-container">，设overflow-x: auto -
<table>自身不设width: 100%，让它按内容自然撑开 - 移动端加媒体查询：
@media (max-width: 768px) { .table-container { overflow-x: auto; } } - 避免对
<img>强行压缩到极窄宽度（如width: 100%在 40px 宽列里），不如用object-fit: cover配固定尺寸容器
最常被跳过的不是图片样式，而是 <col> 放错位置、父容器没宽度、以及忘了 table-layout: fixed 这三件事——它们任何一个缺失，width: 100% 就只是个摆设。
