display: table 在移动端失效是因为表格布局强制拉伸宽度、无视 overflow-x: auto，导致横向滚动失灵；应改用 display: flex + data-label 实现响应式卡片，保留语义结构并确保可访问性。

为什么直接 display: table 在移动端会失效

因为 display: table 及其子元素（table-row、table-cell）在小屏下会强制拉伸整行宽度，无视 overflow-x: auto，导致横向滚动条出现但拖不动内容，甚至把整个页面撑宽。这不是你漏写了 CSS，是浏览器渲染机制决定的——表格布局天生抗拒压缩。

用 display: flex + data-label 实现真卡片化

不改 HTML 结构，只靠 CSS 切换视觉层：桌面端保持 table 语义，移动端用媒体查询转为垂直卡片。关键不是“隐藏 thead”，而是让每个 td 自带上下文。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 给每个 td 加 data-label 属性，比如 <td data-label="姓名">张三</td>
• 移动端媒体查询中，把 tr 设为 display: flex; flex-direction: column，td 设为 display: flex; justify-content: space-between
• 用 ::before 伪元素注入标签：content: attr(data-label)，再加 font-weight: bold 和定位样式
• 必须保留 table 标签本身，不设 display: block，否则屏幕阅读器会丢失行/列关系

避免用 display: grid 做卡片行布局

Grid 适合固定列数的网格展示（如商品列表），但不适合“每行变一张卡”这种线性结构。强行用 grid-template-columns: repeat(auto-fit, ...) 会让 Layout 计算飙升，尤其在低端安卓机上，Resize 时 Layout 耗时可能翻倍。

• 真正适合卡片行的是一维模型：flex-direction: column 或 display: contents 配合父容器 flex
• 如果要用 Grid，只在外层容器做列数切换（比如 PC 端 4 列 → 移动端 1 列），别在每张卡片内部再嵌套 Grid
• 禁用 auto-fit 和命名区域（grid-area），改用显式 repeat(1, 1fr)，性能更稳

卡片点击区域和事件复用怎么处理

原表格的 tr 点击事件在卡片化后全部失效——不是 JS 写错了，是 DOM 结构变了，事件代理目标没了。

• 不要把按钮塞进卡片模板里；整张卡片应可点，热区至少 min-height: 60px
• 用事件代理绑定到卡片容器：cardContainer.addEventListener('click', e => { const card = e.target.closest('.card'); })
• 从卡片元素读取 data-id 或 data-index，再查原始数据数组，别依赖 DOM 顺序
• 若需区分点击位置（比如只响应“编辑”文字），用 e.target.matches('.edit-btn') 判断，别用 stopPropagation

真正难的不是写对那几行 CSS，而是让 data-label 和伪元素生成的标签在 iOS Safari 下不被截断、不重叠、不放大字体，这需要测试真实设备上的 line-height 和 white-space 行为。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！