table-layout: fixed 是实现四列表格等宽的必要前提，需配合 width: 25% 和 box-sizing: border-box；flexbox 和 grid 更适合现代响应式四栏布局，但需注意兼容性与细节控制。
table-layout: fixed 是四列表格等宽的必要前提
直接给 td 或 th 设 width: 25% 不生效，根本原因是浏览器默认用 table-layout: auto —— 它会按内容撑开列宽，图片、长文本一塞进去，外侧列就变宽，25% 彻底失效。
必须显式声明 table-layout: fixed，才能让 width 值真正起作用：
table {
table-layout: fixed;
width: 100%;
}
table th, table td {
width: 25%;
box-sizing: border-box;
}
-
box-sizing: border-box必须加，否则 padding 会让实际宽度超 25% - 别用
tbody td { width: 1% }这类“取巧”写法，它只是触发重排的副作用，不可靠 - 如果表头有图片，
img需额外控制尺寸，否则仍可能撑破单元格
Flexbox 实现四栏等宽更灵活，但要注意 flex-basis 和 min-width
比起表格，display: flex 更适合现代响应式四栏布局，尤其当内容不规整或需动态增删时。
关键不是只写 flex: 1，而是组合使用 flex-basis 和 min-width 防止小屏下挤成一行或换行错乱：
.grid-row {
display: flex;
flex-wrap: wrap;
}
.grid-item {
flex: 0 0 calc(25% - 12px); /* 减去 gap 一半 */
min-width: 240px; /* 小屏下最小宽度，避免过窄 */
padding: 0 6px;
}
- 用
calc(25% - gap)而非flex: 1，确保严格四等分（gap 是总间隙） -
min-width设为具体像素值（如240px），比百分比更可控；低于该值时自动换行 - 换行后若要维持四栏视觉，需配合
@media (min-width: 768px)恢复flex-wrap: nowrap
Grid 布局实现四栏最简洁，但 IE11 需 fallback
display: grid 是目前最直观的解法，一行定义四列，语义清晰，响应式切换也干净：
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
但要注意兼容性断层：
- IE11 不支持
repeat()，得写死：grid-template-columns: 1fr 1fr 1fr 1fr - IE11 不识别
gap，需回退为grid-column-gap: 16px+grid-row-gap: 16px - 若内容高度差异大，加
align-items: start防止底部错位 - 移动端想改成单列？直接
@media (max-width: 767px) { grid-template-columns: 1fr; }，不用改 HTML
图片在四栏中统一尺寸容易被忽略的三个细节
哪怕布局等宽了，图片拉伸、裁切不一致，四栏视觉还是崩。重点不在 width: 100%，而在容器约束和裁剪策略：
- 父容器必须设
height或aspect-ratio，否则object-fit: cover无基准可裁 - 推荐写法：
img { display: block; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative; }，再用绝对定位子元素放图，兼容性最好 - 现代写法可用
aspect-ratio: 16/9+object-fit: cover，但 Safari 15.4 之前不支持aspect-ratio，需加min-height回退
最后提醒：四栏等宽只是起点，内容是否真正适配小屏，取决于每栏内文字行高、按钮尺寸、交互热区是否达标——布局对齐了，不代表体验对齐了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
