通过设置 `table-layout: fixed` 并为每个 `
要实现四列表格严格等宽（尤其解决“外侧列自动变宽”的常见问题），关键在于明确控制列宽分配，而非依赖内容撑开。你已正确启用了 table-layout: fixed——这是前提，它使表格按 css 宽度规则计算列宽，而非根据内容自适应。
但当前 tbody td { width: 1%; } 实际上几乎无效：1% 的宽度在 table-layout: fixed 下会被浏览器忽略或归一化，导致列宽仍由首行（如
）内容决定，从而出现外列更宽的现象。✅ 正确做法是：为每个
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: fixed 是等宽表格的基石，而 width: 25% 是精准分配的执行关键。配合 object-fit 与 aspect-ratio，即可在任意屏幕下实现列宽一致、图片尺寸统一且不失真。