CSS如何将桌面表格改造成移动端卡片布局-css教程-PHP中文网

真卡片布局必须放弃table渲染逻辑，用css将每行转为独立卡片块，字段垂直堆叠带标签；仅加滚动条是妥协，未解决语义丢失、热区过小、屏幕阅读器解析三大问题。

css如何将桌面表格改造成移动端卡片布局

原生 <table> 在小屏上直接缩放或加滚动条，用户得左右拖、眯眼读，这不是适配，是妥协。真卡片布局必须放弃 <code>display: table 的渲染逻辑，用 CSS 把每行变成独立卡片块，字段垂直堆叠、带标签可读——这才能算“改造成功”。

为什么不能只靠 `overflow-x: auto` 或 `.table-responsive`

那些只是把横向滚动塞给用户，没解决「字段语义丢失」「点击热区过小」「屏幕阅读器仍按表格解析」三个核心问题。Bootstrap 的 .table-responsive 和 Layui 的 autoResize 都不改 DOM 结构，<tr><td> 还在那儿硬挤，移动端手指点不到关键字段，辅助技术也读不出「姓名：张三」这种上下文。 <h3><code><table> 改 <code>flex 卡片的关键 CSS 规则

不改 HTML，只靠 CSS 切换视觉结构，是最稳妥的方案：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

桌面端维持 display: table，移动端用 @media (max-width: 768px) 覆盖为 display: flex; flex-direction: column
<tr> 设为 <code>display: block（不是 flex），每个变成一张独立卡片容器
<td> 加 <code>data-label="姓名" 属性，移动端用 ::before 伪元素注入标签：content: attr(data-label) "："
<thead> 在移动端 <code>display: none，避免重复表头干扰卡片流
卡片内字段用 display: flex; justify-content: space-between 对齐，右侧留白防文字顶边

卡片点击区域与事件绑定怎么处理

原来绑在 <tr> 上的 JS 事件全失效了，得重建行为链： <ul><li>给 <code><tbody> 绑 <code>click 事件代理，用 e.target.closest('tr') 拿到被点卡片行

从该 <tr> 的 <code>data-index 或 dataset.index 取原始数据索引，查源数组 originData[index]
别在卡片里塞按钮，整卡可点；操作菜单统一用 layer.open({ type: 1, offset: ['b','c'] }) 底部弹出
若需局部响应（如只点「编辑」文字），用 e.target.matches('.edit-btn') 判断，不调 e.stopPropagation()，否则 iOS 手势会失灵

真正麻烦的不是写这几行 CSS，而是设计师临时说“这个字段要横跨两列”“那个卡片在 iPad 上必须并排”，这时候 grid-column: span 2 在微信 X5 内核里直接不认——得提前做 @supports (display: grid) 降级，或者干脆用 Flexbox + flex-basis 模拟。