aspect-ratio 不能用于 等表格元素，因其仅适用于正常流中的块级、弹性或网格子项，而表格单元格由表格算法控制尺寸；需在 内嵌套 div 并设 aspect-ratio 和 width: 100% 实现比例控制。
aspect-ratio 不能用在 HTML 表格（<table>、<code><td>、<code><th>）上——它对表格单元格完全无效。
<h3>为什么 <code>aspect-ratio 在 <td> 上不生效
<p>浏览器规范明确限制 <code>aspect-ratio 只作用于“参与正常流的块级、弹性或网格子项”，而 <td> 是表格格式化上下文（table formatting context）中的特殊盒模型，其尺寸由表格算法决定，<code>aspect-ratio 被直接忽略。即使你在开发者工具里看到样式已声明，高度也不会按比例计算。
- 常见现象：
td { aspect-ratio: 1 / 1; width: 100%; }看似写了，但单元格仍被内容撑高或压缩变形 - 表格行高由
line-height、内容高度、min-height或height属性主导，aspect-ratio不参与任何计算 - 哪怕把
<td> 改成 <code>display: block，它就不再是语义化表格单元格，会破坏可访问性和打印样式想让表格里某块区域保持比例？得换容器
如果目标是“表格结构 + 某些单元格内内容保持固定宽高比”，唯一可靠做法是：在
<td> 内部套一层支持 <code>aspect-ratio的块级容器（如<div>），再把比例逻辑放进去。 <ul><li>必须给这个 <code><div> 设置 <code>width: 100%（或max-width: 100%），否则aspect-ratio缺少宽度基准，高度算不出来 - 绝不能给该
<div> 设 <code>height、min-height或line-height，否则会压制比例计算 - 图片/视频要放在这层
<div> 里，并配 <code>object-fit和width: 100%; height: 100% - 示例结构：
<td><div class="ratio-box" style="aspect-ratio: 4 / 3; width: 100%"><img src="..." style="max-width:90%"></div></td> - 用
display: grid+grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))替代<table> 的列定义 <li>每个网格项设 <code>aspect-ratio: 1 / 1+width: 100%，且确保父容器没锁死行高（避免grid-auto-rows: 200px） - 保留语义可用
<dl></dl>或<section></section>套结构，再用 ARIA 标注角色（如role="grid"）兼顾可访问性 - 表格语义真正必要时（如财务报表、数据对比），比例需求应由后端预计算尺寸或前端 JS 测量后动态设置
style="width: ...px; height: ...px"
真要等比正方形单元格？别用 <table>，改用 <code>grid
HTML 表格天生不适合响应式比例控制。如果你的“表格”只是视觉网格（比如商品列表、图库、仪表盘卡片），直接换成 CSS Grid 更可控、更轻量、也更符合现代布局逻辑。
最容易被忽略的一点：表格中所有比例控制都发生在单元格内部，而非单元格本身；而一旦你开始往 <td> 里加 wrapper、JS、或降级 hack，不如一开始就放弃表格语义，用更灵活的布局方案——这不是妥协，是技术选型的自然收敛。</td>
