aspect-ratio 在 <td> 或 <th> 上直接声明会静默失效，因其尺寸由表格算法决定；正确做法是在单元格内嵌套块级容器（如 <div>），对该容器设 aspect-ratio、width: 100%、height: auto，并确保多媒体元素设 width: 100%、height: 100%、display: block 及 object-fit。
表格单元格不是 aspect-ratio 的合法作用对象
aspect-ratio 在 <td> 或 <th> 上直接声明会静默失效——表格单元格是表格布局（table layout）中的特殊参与元素，其尺寸由表格算法（table sizing algorithm）决定，不响应 aspect-ratio。即使你写了 aspect-ratio: 16 / 9，浏览器也不会据此推算高度，常见现象包括：高度塌为 0、内容溢出、或完全按表格默认行为撑开。
正确做法：在单元格内嵌套容器并设 aspect-ratio
必须用一个块级容器（如 <div> 或 <figure>）包裹多媒体内容，再对该容器应用 aspect-ratio：
- 给
<td>设width: 100%（或明确宽度，如min-width: 300px），确保子容器有宽度基准 - 在单元格内插入
<div class="media-container">，并设aspect-ratio: 16 / 9、width: 100%、height: auto（不能写height） - 多媒体元素（
<img>、<video>）必须设width: 100%、height: 100%、display: block，再配object-fit: cover或contain - 若表格用了
table-layout: fixed，需确保列宽已通过<col>或width属性定义，否则容器宽度可能不可靠
表格中常见的兼容性陷阱
Safari 15.3 及更早版本不支持 aspect-ratio，且表格环境下的 padding-bottom hack 更容易失效——因为 <td> 默认是 display: table-cell，padding-bottom 不会触发“伪高度”撑开行为。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 降级方案必须把容器设为
position: relative，再用padding-bottom: 56.25%（16:9） +height: 0，内部多媒体用position: absolute铺满 - 别依赖
max-width在单元格里生效——它对<td>无效，应在容器上设 - 避免在
<td>上同时设vertical-align和 flex 布局，会导致aspect-ratio容器被拉伸或压缩
为什么 grid 替代 table 更可靠
如果你的“表格”本质是数据展示而非语义化表格（比如卡片式列表、仪表盘格子），直接改用 display: grid 是更干净的解法：
立即学习“前端免费学习笔记（深入）”；
-
grid容器天然支持aspect-ratio，每个子项可独立设比例 - 无需嵌套多层容器，
.card { aspect-ratio: 4 / 3; }即可生效 - 配合
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))自动响应，比<table>更可控 - 旧版 Safari 兼容也更稳定：
@supports not (aspect-ratio: 1 / 1)降级到padding-tophack 在 grid 中成功率更高
真正难的不是写对 aspect-ratio，而是确认它生效的上下文——表格布局会悄悄绕过你写的 CSS 规则，这点最容易被忽略。
