HTML表格不能设视频背景，正确做法是将video作为视觉层、表格作为内容层叠其上，通过position、z-index和pointer-events控制层级与交互。
HTML表格本身不能设视频背景
表格（<table>）是语义化数据容器，浏览器不支持给 <td> 或 <tr> 设置视频背景。写 background-image: url(video.mp4) 会静默失效——控制台无报错，但只显示默认背景色或空白。
常见错误现象：视频卡在单元格左上角、无法铺满、文字被遮挡、移动端全屏弹出、滚动时错位露白。
- 别把
<video>塞进<td>当“背景”用：它会变成可交互的播放器，破坏表格结构和 SEO - 表格嵌套
<video>后，object-fit和position: fixed失效，因为表格单元格不是定位上下文 - 辅助技术（如读屏软件）会把视频当表格内容朗读，造成语义混乱
想让表格区域有视频效果，得绕开表格布局
真正可行的做法是：用 <video> 做视觉层，再把表格作为独立内容层叠在其上。关键不是“往表格里加视频”，而是“让表格浮在视频上”。
典型结构：
立即学习“前端免费学习笔记（深入）”；
<div class="video-container">
<video autoplay muted loop playsinline>
<source src="bg.mp4" type="video/mp4">
<source src="bg.webm" type="video/webm">
</video>
<div class="table-wrapper">
<table>...</table>
</div>
</div>
-
<video>必须放在<body>直接子级，或与<table>同级的容器内，不能嵌套在<td>里 -
.video-container设position: relative，<video>设position: absolute+z-index: -1，.table-wrapper设position: relative+z-index: 1 - 用
object-fit: cover铺满，而不是width: 100vw; height: 100vh（后者在 iOS 滚动时会跳变）
VIDEO标签在表格场景下的兼容性要点
自动播放限制在所有现代浏览器中都生效，漏掉任一关键属性，视频就卡住不动。
-
autoplay和muted必须同时出现在 HTML 标签里：<video autoplay muted>；JS 后续赋值（如video.muted = true）无效 -
loop不是可选：不加会导致播完停在黑屏或首帧，表格文字突然失去动态背景支撑 - iOS Safari 必须加
playsinline和webkit-playsinline，否则点开就强制全屏 - Firefox 不支持 H.264，只提供 MP4 会白屏；Safari 旧版不支持 VP9，只提供 WebM 会失败——双
<source>是底线
表格内容可读性必须手动增强
视频背景天然干扰文字识别，尤其表格常含小字号、密集数据。不能依赖“看起来还行”，要主动降噪。
- 在
<video>上叠加一层::after遮罩：background: rgba(0,0,0,0.4)，避免纯黑/纯白文字消失 - 表格设
color: white+text-shadow: 0 1px 2px rgba(0,0,0,0.6)，比单纯调高对比度更可靠 - 禁用
<video>的 pointer-events：pointer-events: none，否则表格按钮点击会失效 - 移动端建议降级：用媒体查询检测
max-width: 768px，直接隐藏<video>，改用静态background-image
最易被忽略的是层级关系和 pointer-events：z-index 负值必须配合非 static 定位父容器，而 pointer-events: none 不加的话，用户根本点不到表格里的链接或按钮。
