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