必须同时设置父容器宽度、table-layout: fixed 和 元素，才能使单元格内图片 width: 100% 有效；缺一不可，否则图片无法按列宽自适应缩放。

直接给单元格里的 <img> 写 width: 100% 不行——它会被表格默认布局吞掉，真正起效得靠三层配合：父容器宽度 + table-layout: fixed + 单元格内图片样式。

为什么 <td><img style="max-width:90%"></td> 常常失效

表格默认是 table-layout: auto，列宽由内容撑开，width: 100% 在 <td> 里没参照物；更关键的是，<code><img> 是替换元素，若父 <td> 没被强制定宽，浏览器根本不知道“100%”该算谁的。 <ul> <li>只在 <code><img> 上写 width="100%" 或 style="max-width:90%"，基本无效

<td> 上设 <code>width 属性或内联样式，在 auto 模式下会被忽略

漏掉 table-layout: fixed，哪怕 <col> 写了也白搭

父容器（比如 <div>）没设宽度，整个链路失去计算基准 <h3> <code>table-layout: fixed 必须和 <col> 配合用

这是让单元格“有宽度可依”的唯一可靠路径。不能靠 <th> 或 <code><td> 的 width，必须用语义正确的 <code><col> 元素定义列基准。

• <col> 必须紧贴 <table> 开始标签后、<code><thead> 前，放错位置（如塞进 <code><thead>）就失效 <li>支持 <code>width="200"（px）、width="30%"，不支持 fr 或 calc()
• 没写 <col> 的列，会 fallback 到第一行 <th> 的宽度；若 <code><th> 也没设宽，列就坍缩成最小内容宽 <li>示例结构：<pre class="brush:php;toolbar:false;"></pre> <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>@@##@@</td> </tr></tbody> </table> </li> <h3> <code><img src="a.jpg" style="max-width:90%"> 样式必须加 height: auto 和 max-width: 100%

  只写 width: 100% 会导致图片拉伸变形；max-width: 100% + height: auto 才能保比例缩放。但要注意，这个组合在表格里仍依赖列宽已固定。

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • 删掉 <img> 标签上的 width 和 height 内联属性，否则 CSS 会被覆盖
  • 若图片所在 <td> 是 flex/grid 子项，需额外给 <code><td> 加 <code>min-width: 0，否则 max-width 不触发收缩
  • 图片若带边框或 padding，记得加 box-sizing: border-box，否则总宽超列宽
  • 长 URL 或无空格文本溢出时，<td> 还要配 <code>word-break: break-word 或 overflow-wrap: break-word

    小屏下表格滚动比图片自适应更重要

    当列数多、内容密，硬缩图片反而看不清文字。此时优先做响应式表格容器，而不是死磕单张图缩放。

    • 给表格外层套 <div class="table-container">，设 <code>overflow-x: auto
    • <table> 自身不设 <code>width: 100%，让它按内容自然撑开
    • 移动端加媒体查询：@media (max-width: 768px) { .table-container { overflow-x: auto; } }
    • 避免对 <img> 强行压缩到极窄宽度（如 width: 100% 在 40px 宽列里），不如用 object-fit: cover 配固定尺寸容器

    最常被跳过的不是图片样式，而是 <col> 放错位置、父容器没宽度、以及忘了 table-layout: fixed 这三件事——它们任何一个缺失，width: 100% 就只是个摆设。