响应式表格必须用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%"> 设宽度（百分比优先） <li>避免在 <code>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 吗”，很多问题就自然解开了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！