不能只靠 overflow-x: auto 解决问题，因其仅实现横向滚动而未改善语义与可读性；应结合 display: flex + data-label 实现响应式卡片切换，或谨慎使用 display: grid 重构，并确保事件代理与数据绑定准确。
为什么不能只靠 overflow-x: auto 解决问题
加一层 div 包住 <table> 并设 <code>overflow-x: auto，只是让表格横向可滑动——它没改变任何语义结构，用户仍得左右拖拽看全字段，阅读路径断裂，操作成本高。尤其当字段多（比如 8 列以上）、内容长（如地址、描述）时，小屏上根本没法扫读。
用 display: flex + data-label 实现真卡片切换
不改 HTML 表格结构，仅靠 CSS 把视觉层重构为卡片：桌面端保持 display: table，移动端用媒体查询切换为 flex 布局，并利用 data-label 属性把表头信息“带下来”。
<th> 写成 <code><th data-label="姓名">姓名</th>，对应<td data-label="姓名">张三</td>- 移动端媒体查询里，给
<tr> 设 <code>display: flex; flex-direction: column; - 给
<td> 加 <code>::before { content: attr(data-label) ": "; font-weight: bold; }，实现「姓名：张三」效果 - 隐藏
<thead>，避免重复显示表头；保留 <code><tbody> 内容语义，屏幕阅读器仍能按行理解<h3>用 <code>display: grid替代表格的注意事项如果愿意重构 HTML（比如从
<table> 改成 <code><div class="card-grid">），<code>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 结构变了，事件就断了。得重建绑定链：<ul> <li>给卡片容器（如 <code>#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 文本反推。
