17370845950

通过设置 `table-layout: fixed` 并为每个 `

` 显式指定 `width: 25%`，可强制四列表格所有列等宽；同时结合 `object-fit: cover` 和固定宽高比，确保单元格内图片尺寸统一且响应式。

要实现四列表格严格等宽（尤其解决“外侧列自动变宽”的常见问题），关键在于明确控制列宽分配，而非依赖内容撑开。你已正确启用了 table-layout: fixed——这是前提，它使表格按 CSS 宽度规则计算列宽，而非根据内容自适应。

但当前 tbody td { width: 1%; } 实际上几乎无效：1% 的宽度在 table-layout: fixed 下会被浏览器忽略或归一化，导致列宽仍由首行（如 ）内容决定，从而出现外列更宽的现象。

✅ 正确做法是：为每个 （及 ）设置 width: 25%，确保四列均分总宽：

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* 必须保留 */
}

/* 关键修复：四列等宽 */
tbody td,
thead th {
  width: 25%; /* 每列占 1/4 */
  padding: 8px 12px 8px 0;
  height: 20px;
  overflow: hidden;
}

/* 响应式图片统一尺寸 */
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并填满，避免拉伸变形 */
  border: 0;
  border-radius: 4px;
  aspect-ratio: 16/9; /* 现代浏览器支持，替代旧式宽高固定 */
}

⚠️ 注意事项：

• 务必同时设置 的 width: 25%，否则表头列宽可能与正文不一致；
• 移除 HTML 中过时的 cellspacing="0"（CSS 已通过 border-collapse 控制）；
• 若需兼容较老浏览器（如 IE），可用 min-width: 0 配合 width: 25%，并用 max-width 限制极端缩放；
• aspect-ratio 是理想方案，若需降级，可改用 padding-top: 56.25% + position: relative/absolute 的经典响应式容器技巧。

总结：table-layout: fix



ed 是等宽表格的基石，而 width: 25% 是精准分配的执行关键。配合 object-fit 与 aspect-ratio，即可在任意屏幕下实现列宽一致、图片尺寸统一且不失真。