必须为每个td添加data-label属性，否则移动端表头丢失；应使用max-inline-size替代max-width设置断点；thead需设display:none而非仅隐藏；td::before应设为block并加margin-bottom确保标签清晰可读。
为什么必须给每个 td 加 data-label
不加就等于在移动端扔掉表头——::before 生成的内容为空，用户看到的只是一堆没标签的裸数据。这不是样式问题，是结构缺失。服务端渲染时得在模板循环里插值：<td data-label="{{ column.name }}">{{ value }}</td>；前端 JS 动态创建时，别用 innerHTML 拼接，改用 document.createElement('td') + setAttribute('data-label', name)。英文键名（如 data-label="updatedAt"）比中文更稳，避免 i18n 和自动化测试翻车。
@media 断点该用 max-inline-size 而不是 max-width
max-width: 768px 在 iPad 分屏、折叠屏展开后、甚至 Chrome DevTools 模拟器里都容易误判——实际可视宽度可能只剩 400px，但设备像素宽度仍是 1024px。现代方案是用 @media screen and (max-inline-size: 600px)，它测量的是内容流方向上的可用尺寸（即横屏时是高度，竖屏时是宽度），更贴合真实阅读区域。注意兼容性：Chrome 105+、Firefox 103+、Safari 16.4+ 支持，旧版需降级 fallback。
thead 必须设为 display: none，不能只隐藏 th
把表格转成块级卡片时，thead 在语义和渲染上都已失效。如果只对 th 设 visibility: hidden 或 opacity: 0，它仍占文档流位置，会导致后续 td 堆叠错位；若用 position: absolute 又可能干扰焦点顺序。正确做法是直接 thead { display: none; }。顺带一提：colgroup 在块级布局下完全无效，无需处理，也不用写重置规则。
td::before 的对齐和间距怎么调才不压住内容
::before 默认是 inline 级，和 td 内容挤在一起，换行或字体大小变化时极易错位。稳妥做法是把它设为 display: block，再加一点垂直间距：.table-row td::before { content: attr(data-label) ": "; font-weight: bold; display: block; margin-bottom: 4px; }。别用 position: absolute 配合 top/left——它会脱离流，导致不同列的标签高度不一致，卡片整体高度难控制。另外，确保 td 本身设了 position: relative（仅当需要绝对定位子元素时才加，此处非必需）。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是语法，而是data-label 漏了一两个、断点选了 max-width、或者忘了关掉 thead——这些地方一错，整个响应式表格在小屏上就只剩一堆无法理解的数值。 
