响应式表格小屏转卡片需语义打散并用flex重排，关键在为td添加data-label属性并通过媒体查询控制display值，保留表格结构以保障可访问性与SEO。
响应式表格在小屏上直接堆成卡片，用 display: block 不够
单纯给 <table> 加 display: block 只会让整张表变块级元素，但内部的 <tr>、<td> 依然按表格逻辑渲染，根本不会“堆叠”。真正起效的是把表格结构语义打散，用 CSS 把每行变成独立卡片容器。
- 必须用
display: grid或display: flex重排<tr>，不能依赖表格默认布局 -
<thead>和<tbody>需要显式处理，否则小屏下表头可能消失或错位 - 移动端卡片需要重新定义
<td>的显示方式，比如改成display: flex+flex-direction: column拆出字段名和值
用 @media 切换表格与卡片布局，关键在 display 层级控制
响应式切换不是靠 JS 操作 DOM，而是靠媒体查询逐层覆盖 display 值。重点在于：表格结构保留（利于可访问性和 SEO），仅视觉重排。
- 桌面端保持
display: table系列值（table、table-row、table-cell） - 小屏下对
<tbody>设display: flex，对每个<tr>设display: block并加边框/阴影模拟卡片 -
<th>在小屏需设display: none，改用<td>的::before伪元素注入表头文字，避免重复内容
/* 小屏卡片模式 */
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
tbody { display: flex; flex-direction: column; }
tr { margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px; }
td {
display: flex;
padding: 0.5rem;
}
td::before {
content: attr(data-label) ": ";
font-weight: bold;
}
}
data-label 属性是让卡片知道“这是哪一列”的唯一可靠方式
表格转卡片时，每条记录要能自解释字段含义，不能靠位置推断。CSS 无法读取 <th> 文本，所以必须提前把表头文字存进对应 <td> 的 data-label 属性里。
- 服务端渲染或构建时就得写好
<td data-label="用户名">张三</td>，纯 CSS 无法动态提取<th>内容 - 如果用 JS 补充
data-label，注意触发时机——得等<th>渲染完成后再遍历赋值，否则可能拿不到文本 - 不加
data-label的后果：小屏卡片里所有字段都只剩值，没有标签，用户完全看不懂
用 flex 替代 grid 做卡片堆叠更稳妥，尤其兼容老版本 Safari
虽然 display: grid 写起来更直观（比如 grid-template-areas），但在 iOS Safari 15.4 之前，grid 对表格元素的子元素支持极差，<tr> 设 display: grid 会直接失效。
立即学习“前端免费学习笔记（深入）”；
- 优先选
flex：对<tbody>设display: flex; flex-direction: column，稳定兼容到 iOS 12+ - 避免在
<tr>上用grid，哪怕只在现代浏览器跑，也容易因父级display: block导致网格塌陷 - 如果真要用
grid控制单张卡片内部（比如字段名+值左右对齐），确保它只作用于<td>内部容器，不碰表格语义节点
表格结构本身没法删，卡片只是视觉层的事。最容易被忽略的是：没加 data-label 就直接写媒体查询，结果小屏一堆无标签数值——这时候不是 CSS 写错了，是 HTML 少了一步。
