响应式表格的核心是改变数据呈现结构而非缩小表格，小屏时应转为垂直堆叠的卡片布局；通过@media切换display值，配合data-label与::before实现语义化标签，确保可访问性。
响应式表格的核心思路不是“让表格变小”，而是“改变数据呈现结构”
直接对 <table> 设置 width: 100% 或用 overflow-x: auto 包裹，只是把横向滚动强加给用户——这不算真正响应式，尤其对屏幕阅读器和键盘导航不友好。真正的响应式表格要根据视口宽度，切换数据组织方式：小屏时放弃行列结构，转为每条记录垂直堆叠的卡片式布局。
用 @media 切换 display 值是最可靠的基础方案
现代浏览器对 display: table 系列值（table、table-row、table-cell）支持极好，且能配合 @media 动态切换。关键在于：小屏下把 <tr> 改成 display: block，<td> 和 <th> 改成 display: block 并添加 ::before 伪元素注入表头文字。
常见错误现象：display: grid 或 flex 替代表格语义，导致可访问性丢失；或只改 <table> 的 display，没处理内部元素，结果样式错乱。
- 必须为每个
<td>设置data-label属性，例如<td data-label="姓名">张三</td> - 媒体查询断点建议从
max-width: 768px开始，覆盖主流手机横屏及小平板 -
<th>在小屏下应设为display: none，避免重复显示表头
data-label + ::before 是实现语义化垂直布局的关键
没有 data-label，小屏下就无法知道某段内容对应哪个字段。CSS 中用 content: attr(data-label) 把它提出来，再控制样式使其像标签一样前置。
立即学习“前端免费学习笔记（深入）”；
/* 小屏样式 */
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999em;
left: -9999em;
}
tr {
border: 1px solid #ccc;
margin-bottom: 1em;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td::before {
content: attr(data-label) ": ";
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
}
}注意：不要用 float 或 position: absolute 做整体布局，会导致读屏器顺序错乱；::before 只用于视觉标注，不影响 DOM 顺序。
复杂表格需配合 JavaScript 处理跨行/跨列与排序逻辑
当表格含 rowspan、colspan，或依赖 sort() 动态重排时，纯 CSS 方案会失效。此时必须在 JS 层检测视口变化，手动重构 DOM 结构（例如把每行转成 <section> + 多个 <div>），并同步维护 ARIA 属性如 aria-sort。
性能影响：频繁触发 resize 事件时，避免在回调中直接操作 DOM；建议用 requestAnimationFrame 节流，或监听 matchMedia 的 change 事件代替。
容易被忽略的地方：服务端渲染（SSR）场景下，初始 HTML 必须包含 data-label，不能靠 JS 注入——否则首屏小屏用户看不到字段名。
