本文介绍如何通过css强制html四列表格所有列等宽，并确保表头图片在保持响应式的同时尺寸一致，解决因列宽不均导致的视觉错乱问题。
要实现四列表格严格等宽（每列占25%），关键在于正确设置列宽约束并配合 table-layout: fixed 的语义。您当前的 CSS 中 tbody td { width: 1%; } 实际上并未起到等分作用——1% 是一个极小的基准值，浏览器会根据内容自动重计算列宽，导致外侧列被撑开（尤其当表头含图片时），从而破坏布局一致性。
✅ 正确做法是：为每个 <td>（或更推荐地，为 <col> 或 <th>/<td> 统一）显式指定 width: 25%，并确保父级 <table> 保持 table-layout: fixed：
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed; /* 启用固定布局，使 width 值生效 */
border: none;
}
/* 推荐：为所有单元格统一设宽（含表头 th）*/
table th,
table td {
width: 25%; /* 四列严格等分 */
padding: 8px 12px 8px 0;
box-sizing: border-box; /* 确保 padding 不影响 25% 宽度计算 */
overflow: hidden;
}
/* 图片统一响应式控制：等比缩放 + 固定宽高比 */
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 防止拉伸变形，裁剪适配 */
border-radius: 4px;
aspect-ratio: 16/9; /* 现代浏览器支持；旧版可配合 max-height/min-height 回退 */
}⚠️ 注意事项：
- 移除 HTML 中已废弃的 cellspacing="0" 属性，改用 border-collapse: collapse 控制间距；
- 若需兼容较老浏览器（如 IE），aspect-ratio 可替换为容器包裹 + padding-top: 56.25%（16:9）的「垂直 padding 技巧」；
- 强烈建议为 <table> 添加 <colgroup> 显式定义列宽，提升语义性与可控性：
<table>
<colgroup>
<col style="width: 25%">
<col style="width: 25%">
<col style="width: 25%">
<col style="width: 25%">
</colgroup>
<thead>
<tr>
<th><img src="icon1.jpg" alt="Col1"></th>
<th><img src="icon2.jpg" alt="Col2"></th>
<th><img src="icon3.jpg" alt="Col3"></th>
<th><img src="icon4.jpg" alt="Col4"></th>
</tr>
</thead>
<!-- tbody... -->
</table>这样，无论图片原始尺寸如何，所有列宽度严格一致，图片在各自单元格内按比例自适应填充，真正实现「等宽 + 响应 + 视觉统一」。
立即学习“前端免费学习笔记（深入）”；
