响应式表格必须用CSS媒体查询控制布局而非JavaScript，核心是设置table-layout: fixed、width: 100%及列宽，并在小屏下通过data-label+display: block将表格退化为语义块结构。
html-ppt-to-pdf
将使用 `` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
直接用 CSS 媒体查询控制单元格显示，不是靠 JavaScript 监听 resize 或隐藏/显示整行 —— 后者在旋转屏幕、分屏、读屏器下会失效，且破坏语义。
table-layout: fixed 是响应式表格的硬性前提
不设这个属性，浏览器默认按内容撑开列宽，小屏上一列被长文本或图片顶开，整行就错位甚至横向溢出。必须同时满足：
-
table 元素显式声明 width: 100%
- 至少一列通过
<col width="20%"> 或 <th style="width: 25%"> 设宽度（百分比优先）
- 避免在
td 上写 white-space: nowrap，除非你真想禁换行
IE8+ 支持，但 Outlook 完全忽略该属性，邮件模板慎用。
小屏下用 data-label + display: block 堆叠单元格
适合字段语义明确、列数 ≥ 4 的场景（比如“创建时间”“操作人”“状态”），比横向滚动更易读。
- 给每个
td 加 data-label 属性：<td data-label="订单号">ORD-2026-7890</td>
- 媒体查询里把
tr 设为 display: block，td 也设 display: block
- 用
td::before { content: attr(data-label); } 插入表头文字，别用 float 或 inline-block —— 窄屏下换行错位风险高
- 伪元素默认是
inline，如需对齐或截断，加 display: inline-block 或 white-space: nowrap; text-overflow: ellipsis;
@media 控制的是容器级布局切换，不是单个单元格显隐
很多人误以为“隐藏
thead 就算响应式”，其实只是视觉遮盖，结构仍在，读屏器仍按原顺序播报，SEO 也不友好。
- 真正有效的切换，是让
table 在小屏下退化为语义合理的块级结构（如 div 堆叠），而非强行压缩表格本身
- 断点建议用
@media (max-width: 767px)，避开平板横竖屏临界抖动
- 不要用
display: none 隐藏 th 或 td —— 可访问性直接归零；要用 visibility: hidden + position: absolute 移出视口（仅限极少数视觉装饰需求）
关键点不在写了多少媒体查询，而在是否把布局逻辑锚定在容器行为（
table-layout、
display: block/table）上。一旦从“怎么让表格缩进屏幕”转向“小屏下它还该叫 table 吗”，很多问题就自然解开了。
