Layui原生table不支持自动卡片化，需手动替换DOM+CSS媒体查询+JS控制；必须弃用table.render()改用laytpl渲染，并通过设备判断分别渲染表格或卡片容器。
直接上结论：layui 原生 table 不支持自动卡片化，必须手动替换 dom 结构 + css 媒体查询 + js 逻辑控制，不能依赖 autoresize 或 responsive 配置项——那些只管滚动，不管布局形态。
为什么不能用 table.render() 直接适配卡片模式
Layui 的 table.render() 是为固定表头+横向滚动设计的，底层强制生成 <table> 标签和两层独立滚动容器（.layui-table-header / .layui-table-body），在小屏下无法语义化地“拆行成卡”。强行加 media query 改 display: block 会导致样式崩坏、事件丢失、分页错位。
-
table元素本身不支持 flex / grid 卡片流式排列，浏览器对<tr><td>的 display 覆盖限制极严 -
lay-event绑定在<tr>上，卡片化后点击区域与数据上下文脱钩 - 服务端返回的 JSON 数据结构不变，但渲染目标从「表格行」变成「卡片块」，必须重写模板逻辑
用 template + media query 实现真卡片切换
核心是放弃 table.render()，改用 laytpl 渲染，配合 @media (max-width: 768px) 控制显示形态。PC 端仍可用 table，移动端用 <div class="card"> 包裹每条数据。
- HTML 结构里准备两个容器：
<div id="table-container"></div>（PC） 和<div id="card-container"></div>（Mobile），初始都空着 - 用
layui.device().mobile或window.matchMedia判断当前环境，只渲染对应容器 - 卡片模板中每个字段用
<div class="field"><span class="label">姓名</span><span class="value">{{d.name}}</span></div>结构，data-label属性可选但推荐保留，方便后续 JS 提取 - 必须给卡片加
cursor: pointer和足够热区（至少min-height: 60px），否则 iOS/Android 触摸反馈弱
点击卡片时如何复用原 table 行事件逻辑
原来写的 table.on('row(demo)', ...) 失效了，得用事件代理 + 数据绑定方式重建行为链。
- 给卡片容器绑定
click，用e.target.closest('.card')拿到被点卡片元素 - 从该卡片的
data-id（或data-index）属性读取原始数据索引，再查原始数据数组originData[index] - 不要把操作按钮塞进卡片模板里——移动端卡片应整块可点，操作菜单用
layer.open({ type: 1, offset: ['b','c'] })从底部弹出 - 若需区分点击位置（如只在「编辑」文字上响应），用
e.target.matches('.edit-btn')判断，避免stopPropagation干扰全局手势
容易被忽略的细节：字体、间距与无障碍
很多人做完结构切换就以为完成了，结果在 iPhone 上字看不清、点不中、朗读器读不出字段名。
- CSS 中必须覆盖
.card .label字体大小（建议font-size: 14px），并设line-height: 1.5防止行距过挤 - 卡片内
.field的padding至少8px 12px，iOS Safari 对小于 44px 高度的可点区域会降权处理 - 给每个
.label加aria-hidden="true"，同时在卡片根元素加role="region"和aria-labelledby指向主字段，保证 VoiceOver 可读性 - 别忘了
viewportmeta 标签里带user-scalable=no—— 这不是为了锁缩放，而是防止双击放大后卡片错位
最麻烦的不是写代码，是测试时发现安卓 WebView 对 flex-wrap: wrap 的兼容性比预期差，有时需要加 min-width: 0 强制子项收缩；还有部分低端机 touchstart 延迟高，得加 touch-action: manipulation 才能保点击响应。
