aspect-ratio不能直接用于td或tr，因其默认display: table-cell不支持该属性；必须用外层块级容器（如div）包裹视频并设aspect-ratio，同时确保td有明确宽度、容器无height声明、video设width:100%;height:100%;object-fit。
aspect-ratio 不能直接用在 td 或 tr 上
表格单元格（td）默认是表格布局（display: table-cell），而 aspect-ratio 只对块级、弹性或网格容器生效。你写 td { aspect-ratio: 16 / 9; }，浏览器会静默忽略——既不报错，也不推导高度，结果通常是视频撑开单元格、拉伸变形，或高度塌为 0。
常见错误现象：td 高度随内容浮动、视频溢出、相邻行被顶高、打印预览比例丢失。
-
td必须显式设为display: block或display: grid才能启用aspect-ratio，但这会破坏表格语义和结构流 - 若强行改
display，table的自动列宽分配、垂直对齐（vertical-align）、边框合并等特性全部失效 - 即使设了
aspect-ratio，td若无明确宽度（如未设width或受父table约束），仍无法计算高度
正确做法：用容器包裹视频，再嵌入 td
把 aspect-ratio 移到视频的**直接父容器**（比如 div），而不是 td 本身。这个容器负责锁定比例，td 只负责布局定位。
关键约束必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
td设width（如width: 300px）或max-width，确保子容器有宽度基准 - 容器（
div）设display: block、width: 100%、aspect-ratio: 16 / 9，且**不设height** - 视频本身设
width: 100%、height: 100%、object-fit: contain或cover - 移除
video标签上的width/heightHTML 属性，否则覆盖 CSS
示例结构：
<table>
<tr>
<td width="400">
<div class="video-wrapper">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
</td>
</tr>
</table>
.video-wrapper {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
兼容性问题在表格里更严重
表格环境放大了 aspect-ratio 的兼容短板：Safari ≤ 15.4 在 table-cell 内部的 display: block 子元素中，aspect-ratio 计算可能延迟或失效；旧版 Android WebView 甚至不解析该属性，导致容器高度为 0，视频压成一条线。
稳妥 fallback 方案不是靠 JS 补救，而是用 @supports + padding-bottom：
- 先写通用规则：
td设固定宽度，.video-wrapper用position: relative; padding-bottom: 56.25%; height: 0; - 再用
@supports (aspect-ratio: 1 / 1)覆盖为现代写法 - 避免在
td上用flex或grid—— 表格单元格的 flex 布局在 Safari 中与aspect-ratio冲突概率极高
容易被忽略的细节：poster 和多分辨率源
表格里视频加载前的占位图（poster）如果尺寸不匹配容器比例，会在 aspect-ratio 容器内拉伸或留白，造成视觉跳变。这不是 aspect-ratio 的错，但会掩盖真正问题。
-
poster图片必须和视频原始比例一致（如 16:9 视频配 1280×720 poster） - 多个
<source>应带media属性（如media="(min-width: 768px)"），而非依赖 JS 切换——否则首帧仍按默认尺寸渲染，触发 CLS - 如果表格列宽由内容撑开（
table-layout: auto），td宽度可能不稳定，导致aspect-ratio容器高度抖动；建议设table-layout: fixed并显式定义列宽
真正卡住的点从来不是“怎么写 aspect-ratio”，而是容器有没有宽度基准、子元素有没有被 object-fit 约束、以及表格布局本身的刚性是否和响应式需求冲突。
