HTML表格内图片多屏幕尺寸显示异常，设置max-width未解决求助

DevOps 小满

2026-9-27

问题根因

HTML表格结构不规范：标签下直接嵌套开启标签，且第三个

，缺少首行

未闭合就写了下一个

，浏览器自动纠错补全结构的逻辑在不同视口宽度下渲染不一致，是布局异常的核心诱因。

单元格样式错用块级元素属性：td属于表格单元格元素，本身不支持margin属性，你给绑定在td上的.infoS类设置了width: 90%、margin: 0 auto，会干扰表格自带的宽度计算逻辑，半屏视口宽度不足时直接触发错位。

表格默认使用自适应布局算法：table默认table-layout: auto，单元格宽度会随内容、视口大小动态调整，当半屏时视口宽度不足以容纳所有单元格的最小内容宽度时，就会出现挤压变形的情况。

修复方案

先修正HTML表格的语法错误，补全缺失的<tr>开标签、遗漏的</td>闭标签，保证结构完整。
调整.infoS的样式，移除不适用于td的属性，同时给table新增固定布局规则，避免宽度动态计算异常：

/* 新增table全局样式 */
table {
  width: 100%;
  table-layout: fixed;
  /* 可选：合并单元格边框，样式更统一 */
  border-collapse: separate;
  border-spacing: 15px 0; /* 替代原infoS的margin-top和左右间距需求 */
  margin-top: 15px;
}

.Price {
  font-size: 10pt;
}

.infoS {
  background-color: #da9b48;
  color: rgb(31, 22, 5);
  padding: 3px;
  padding-left: 45px;
  /* 移除原有的width:90%、margin相关属性，td不支持margin，宽度由table统一控制 */
}

.Pinfo {
  font-size: 7pt;
}

/* 可选：给图片新增响应式规则，避免小屏溢出单元格 */
.infoS img {
  max-width: 100%;
  height: auto;
}

修正后的完整HTML结构参考：

<table>
  <tr>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA G640
      </p>
      <img src="./images/PIXMA G640.png" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 150$
      </p>
    </td>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA TS7440
      </p>
      <img src="./images/PIXMA TS7440.png" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 250$
      </p>
    </td>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA G540
      </p>
      <img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 170$
      </p>
    </td>
    <td class="infoS">
      <p class="Pinfo">
        PIXMA G540
      </p>
      <img src="./images/PIXMA G540.png" alt="Pixma photo printer" width="75" height="75">
      <p class="Price">
        Price : 120$
      </p>
    </td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者user14615572

HTML表格内图片多屏幕尺寸显示异常，设置max-width未解决求助

问题根因 #

修复方案 #

问题根因

修复方案