如何让4列HTML表格列宽一致/图片保持响应式同尺寸？

一、强制所有列宽度完全相同的实现方法 #

你已经启用了table-layout: fixed，这是固定列宽的核心，但当前tbody td的width: 1%规则会打乱列宽分配，需要做以下调整：

• 移除tbody td中的width: 1%，或者直接给所有单元格（包括表头<th>和数据<td>）统一设置width: 25%（4列均分100%宽度）
• 固定布局下，表格会严格遵循设置的列宽比例，不会因内容长度改变列宽

调整后的完整CSS示例：

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* 固定布局优先应用设置的列宽 */
  position: relative;
  border: 0;
}

/* 统一所有单元格的宽度和基础样式 */
th, tbody td {
  width: 25%;
  padding: 8px 12px 8px 0;
  height: 20px;
  overflow: hidden;
  position: relative;
}

这样设置后，4列的宽度会完全一致，从根源解决表头图片尺寸不一的问题。

二、无法强制列宽时，保证图片尺寸统一且响应式的方案 #

如果因业务限制无法固定列宽（比如表格存在超长不可换行内容），可以通过优化图片样式实现尺寸统一：

• 修正标签：HTML中图片标签是<img>，你的CSS选择器image是错误的，需改为img
• 用object-fit属性保证图片比例不变，避免拉伸变形；搭配aspect-ratio固定宽高比
• 保留width: 100%让图片自适应所在列的宽度，保持响应性

调整后的图片CSS：

img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
  aspect-ratio: 16/9; /* 固定16:9的宽高比 */
  object-fit: cover; /* 图片覆盖容器，裁剪多余部分以保持比例，适合需要填满容器的场景 */
  /* 若需完整显示图片，可替换为 object-fit: contain，此时容器空白处会留空 */
}

即使列宽有差异，图片也会维持统一的比例，不会出现显示怪异的情况。

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