不能只靠 overflow-x: auto 解决问题，因其仅实现横向滚动而未改善语义与可读性；应结合 display: flex + data-label 实现响应式卡片切换，或谨慎使用 display: grid 重构，并确保事件代理与数据绑定准确。
为什么不能只靠 overflow-x: auto 解决问题
加一层 div 包住 <table> 并设 overflow-x: auto，只是让表格横向可滑动——它没改变任何语义结构，用户仍得左右拖拽看全字段，阅读路径断裂，操作成本高。尤其当字段多（比如 8 列以上）、内容长（如地址、描述）时，小屏上根本没法扫读。
用 display: flex + data-label 实现真卡片切换
不改 HTML 表格结构，仅靠 CSS 把视觉层重构为卡片：桌面端保持 display: table，移动端用媒体查询切换为 flex 布局，并利用 data-label 属性把表头信息“带下来”。
-
<th>写成<th data-label="姓名">姓名</th>，对应<td data-label="姓名">张三</td> - 移动端媒体查询里，给
<tr>设display: flex; flex-direction: column; - 给
<td>加::before { content: attr(data-label) ": "; font-weight: bold; }，实现「姓名：张三」效果 - 隐藏
<thead>，避免重复显示表头；保留<tbody>内容语义，屏幕阅读器仍能按行理解
用 display: grid 替代表格的注意事项
如果愿意重构 HTML（比如从 <table> 改成 <div class="card-grid">），display: grid 更可控，但必须避开几个坑：
- 别直接写
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 老版本微信 X5 内核完全不识别auto-fit，整块布局消失 - 先用
@supports (display: grid)包裹，降级方案用flex-wrap+flex-basis: calc(50% - 8px) - 卡片内图片必须加
img { width: 100%; height: auto; display: block; }，否则会撑破容器 - 别依赖
gap，X5 内核不支持，改用margin模拟，但首尾卡片要额外处理
点击卡片时如何复用原表格行为逻辑
原 table.on('row(demo)', ...) 绑定在 <tr> 上，卡片化后 DOM 结构变了，事件就断了。得重建绑定链：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器（如
#card-container）用事件代理监听click - 用
e.target.closest('[data-id]')拿到被点卡片元素，读取data-id或data-index - 查原始数据数组
originData[index]，而不是从 DOM 中提取文本——避免格式污染（如带单位的数字、HTML 标签） - 整张卡片设
cursor: pointer和min-height: 60px，iOS/Android 触摸反馈才可靠
真正麻烦的不是怎么写那几行 CSS，而是字段语义丢失后，怎么让「编辑」「删除」这类操作还能精准关联到原始数据项——data-id 必须和后端返回的唯一标识严格一致，且不能靠 DOM 文本反推。
