小屏幕表格响应式需用媒体查询配合display: block重排，tr变块级、td/th垂直堆叠并用data-label伪元素标注；恢复大屏时须同步重置tr为table-row、td/th为table-cell；rowspan/colspan不兼容此方案，应改用横向滚动或服务端生成双dom；排序事件需委托父容器或禁用小屏交互。
小屏幕下表格内容被截断，怎么让 table 不溢出容器
直接给 table 加 width: 100% 不够，因为单元格内容（尤其长文本、URL、邮箱）会撑开列宽，导致横向滚动或溢出。关键不是缩放表格，而是改变渲染逻辑。
常见做法是用媒体查询配合 display: block 强制重排，把每行 tr 变成块级容器，再把每个 td 或 th 转为带标签的垂直堆叠结构：
.responsive-table tbody tr {
display: block;
border-bottom: 1px solid #ddd;
}
.responsive-table tbody td,
.responsive-table tbody th {
display: block;
text-align: right;
padding: 0.5em 0;
}
.responsive-table tbody td::before,
.responsive-table tbody th::before {
content: attr(data-label) ": ";
font-weight: bold;
display: inline-block;
width: 40%;
text-align: left;
}
前提是 HTML 中每个 td 和 th 都要加 data-label 属性，比如：<td data-label="用户名">alice</td>。否则伪元素没内容可读。
用 @media 切换表格布局时，为什么 display: table-cell 恢复不了
因为一旦在小屏中把 td 设为 display: block，大屏媒体查询里只写 display: table-cell 是不够的——父级 tr 还是 block，子元素设成 table-cell 无效。
立即学习“前端免费学习笔记（深入）”；
必须同步重置整条链路的显示模式：
-
tr必须从block改回table-row -
td/th才能生效table-cell - 如果用了
tbody包裹，也要确认它没被意外设成block
推荐统一用类名控制，避免样式层叠冲突：
@media (min-width: 768px) {
.responsive-table--stacked tbody tr { display: table-row; }
.responsive-table--stacked tbody td,
.responsive-table--stacked tbody th { display: table-cell; }
.responsive-table--stacked tbody td::before,
.responsive-table--stacked tbody th::before { content: ""; }
}
表格有合并单元格（rowspan/colspan），响应式后布局错乱
这是硬伤。display: block + 垂直堆叠方案完全不兼容 rowspan 和 colspan，伪元素无法还原跨行/列语义，视觉和可访问性都会出问题。
遇到这类结构，有两个务实选择：
- 放弃堆叠，改用横向滚动容器：
<div class="table-scroll"><table>...</table></div>，配overflow-x: auto和-webkit-overflow-scrolling: touch - 服务端或 JS 在小屏时生成两套 DOM：一套原生
table（大屏），一套用div+aria-label模拟的语义化列表（小屏）
纯 CSS 无解。强行用 grid 替代 table 也不推荐——table 的语义、键盘导航、屏幕阅读器支持是 grid 模拟不了的。
移动端点击 th 排序时，响应式后事件绑定失效
因为 DOM 结构变了：原本的 th 在小屏下只是普通块元素，且可能被伪元素遮盖，click 事件监听还在旧选择器上，但元素已不是原来那个渲染节点。
解决方案只有两个方向：
- 用事件委托，监听父容器（如
.responsive-table），用event.target.matches('th[data-sort]')判断来源 - 不在小屏启用排序，CSS 里加
pointer-events: none禁用th点击，并隐藏排序图标
别试图用 mouseenter 或 focus 模拟，移动端没有稳定 hover 状态，且触屏焦点行为不可靠。
真正难的不是写出媒体查询，而是决定哪些数据在小屏必须可读、哪些可以折叠、哪些该换交互方式。自适应表格最常被忽略的一点：它从来不只是 CSS 任务，而是数据呈现策略的重新设计。
