响应式表格小屏转卡片需语义打散并用flex重排，关键在为td添加data-label属性并通过媒体查询控制display值，保留表格结构以保障可访问性与SEO。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

响应式表格在小屏上直接堆成卡片，用 display: block 不够

单纯给 <table> 加 <code>display: block 只会让整张表变块级元素，但内部的 <tr>、<code><td> 依然按表格逻辑渲染，根本不会“堆叠”。真正起效的是把表格结构语义打散，用 CSS 把每行变成独立卡片容器。<ul><li>必须用 <code>display: grid 或 display: flex 重排 <tr>，不能依赖表格默认布局<li><code><thead> 和 <code><tbody> 需要显式处理，否则小屏下表头可能消失或错位<li>移动端卡片需要重新定义 <code><td> 的显示方式，比如改成 <code>display: flex + flex-direction: column 拆出字段名和值

用 @media 切换表格与卡片布局，关键在 display 层级控制

响应式切换不是靠 JS 操作 DOM，而是靠媒体查询逐层覆盖 display 值。重点在于：表格结构保留（利于可访问性和 SEO），仅视觉重排。

• 桌面端保持 display: table 系列值（table、table-row、table-cell）
• 小屏下对 <tbody> 设 <code>display: flex，对每个 <tr> 设 <code>display: block 并加边框/阴影模拟卡片
• <th> 在小屏需设 <code>display: none，改用 <td> 的 <code>::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> 文本，所以必须提前把表头文字存进对应 <code><td> 的 <code>data-label 属性里。

  • 服务端渲染或构建时就得写好 <td data-label="用户名">张三</td>，纯 CSS 无法动态提取 <th> 内容<li>如果用 JS 补充 <code>data-label，注意触发时机——得等 <th> 渲染完成后再遍历赋值，否则可能拿不到文本<li>不加 <code>data-label 的后果：小屏卡片里所有字段都只剩值，没有标签，用户完全看不懂

  用 flex 替代 grid 做卡片堆叠更稳妥，尤其兼容老版本 Safari

  虽然 display: grid 写起来更直观（比如 grid-template-areas），但在 iOS Safari 15.4 之前，grid 对表格元素的子元素支持极差，<tr> 设 <code>display: grid 会直接失效。

  立即学习“前端免费学习笔记（深入）”；

  • 优先选 flex：对 <tbody> 设 <code>display: flex; flex-direction: column，稳定兼容到 iOS 12+
  • 避免在 <tr> 上用 <code>grid，哪怕只在现代浏览器跑，也容易因父级 display: block 导致网格塌陷
  • 如果真要用 grid 控制单张卡片内部（比如字段名+值左右对齐），确保它只作用于 <td> 内部容器，不碰表格语义节点<p>表格结构本身没法删，卡片只是视觉层的事。最容易被忽略的是：没加 <code>data-label 就直接写媒体查询，结果小屏一堆无标签数值——这时候不是 CSS 写错了，是 HTML 少了一步。