四栏等宽需设 table-layout: fixed 于 table 元素，配合 th/td 统一 width: 25% 和 box-sizing: border-box；图片需 object-fit: cover 与 aspect-ratio 协同控制；小屏必须用媒体查询重置 display 并转单列。
table-layout: fixed 是四栏等宽的硬性前提
不设 table-layout: fixed，width: 25% 就是摆设。浏览器默认用 auto 布局，会按内容撑开列宽——尤其表头含图片时，外侧列常被拉得比中间宽一倍。这个属性必须加在 <table> 上，且不能被后代样式覆盖。
-
table { table-layout: fixed; width: 100%; }是最低配置 - 如果父容器有 padding 或 max-width，要确保它不影响 table 实际渲染宽度
- IE8+ 支持该属性，但 IE9 及以下对
aspect-ratio和object-fit无支持，需另作回退
th 和 td 必须统一设 width: 25%
只给 <td> 设宽、漏掉 <th>，表头列就会“脱节”。更稳妥的做法是用元素选择器统一批量控制：
table th, table td {
width: 25%;
box-sizing: border-box;
padding: 8px 12px;
overflow: hidden;
}
- 不要用
<col>标签配合width属性——它在部分 Safari 版本中不可靠，且无法继承box-sizing -
box-sizing: border-box必须显式声明，否则padding会让实际宽度超 25% - 若某列内容过长导致换行，用
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;控制溢出
图片在四栏里保持统一尺寸的关键控制点
单纯 width: 100% 不够：不同原始比例的图片会被拉伸或留白。真正起作用的是三者组合：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16/9;
}
-
object-fit: cover裁剪适配，避免变形；contain会留白，fill会拉伸 -
aspect-ratio是现代方案，旧版浏览器（如 Chrome 80 以下）需用min-height+padding-top伪元素模拟 - 如果图片来自 CMS 或用户上传，务必在后端缩略图服务中统一输出为 16:9 或 4:3 比例，否则前端强控易失真
移动端小屏下四栏必须转单列
四栏在 320px 宽屏幕上强行并排，文字挤成一条线，点击区域几乎为零。必须用媒体查询断开：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 767px) {
table, table thead, table tbody, table th, table td, table tr {
display: block;
}
table th, table td {
width: 100%;
}
}
- 别只改
width，要整套重置 display 行为，否则tr还是横向排列 - 转单列后，
th应作为标题前置，可用::before伪元素把表头内容注入对应td前，保证语义完整 - 如果表格数据量大，考虑在小屏下改用卡片流（
display: flex; flex-direction: column;），而非维持表格结构
table-layout: fixed 的生效条件、box-sizing 的遗漏、以及小屏下 display 重置的完整性——这三点没踩准，调三天也出不来想要的效果。 
