真卡片布局必须用css重构视觉流而不改语义结构，通过data-label+媒体查询实现：pc端保持table显示，移动端将tr转为块级卡片并用::before注入标签，兼顾可访问性与视觉独立性。

原生 <table> 在小屏下硬压缩会糊成一团，直接加 <code>overflow-x: auto 只是滚动，不是卡片——真卡片布局必须用 CSS 重构视觉流，不改语义结构。

为什么不能只靠 table-responsive 或 display: block

Bootstrap 的 .table-responsive 只包一层 overflow-x: auto，DOM 还是 <tr><td> 嵌套，根本没拆行；直接给 <code><tr> 设 <code>display: block 会导致：

• <td> 宽度失控，文字挤在一起<li>表头（<code><th>）和单元格失去对应关系，无法知道“张三”对应哪一列<li>屏幕阅读器仍按表格逻辑读取，但视觉已是堆叠卡片，语义与呈现错位</li> <h3>用 <code>data-label + 媒体查询实现真卡片

  保留原始 <table> 结构，只为每个 <code><td> 添加 <code>data-label 属性，例如：<td data-label="姓名">张三</td>。然后在移动端用 CSS 注入标签：

  /* PC 端保持表格 */
  @media (min-width: 769px) {
    table, tbody, tr, th, td { display: table; }
  }
  <p>/<em> 移动端转卡片 </em>/
  @media (max-width: 768px) {
  table, tbody, tr { display: block; }
  tr { margin-bottom: 12px; padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  th, td { display: block; text-align: left; }
  th::before,
  td::before {
  content: attr(data-label) ": ";
  font-weight: 600;
  color: #666;
  }
  th { display: none; } /<em> 隐藏原表头 </em>/
  }</p>

  关键点：

  

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

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

  下载
  • 不删 <thead>，只用 <code>display: none 隐藏，保证 HTML 语义完整
  • ::before 伪元素注入标签，避免 JS 操作 DOM
  • 每张“卡片”即一个 <tr>，自带内边距、圆角和阴影，视觉独立<h3>Flex/Grid 替代方案：何时该放弃 <code><table><p>如果数据本身不强调行列关系（比如用户列表、商品清单），直接用 <code><div class="card"> + Flex/Grid 更干净：<ul> <li>用 <code>display: flex; flex-wrap: wrap; + gap 控制卡片间距，比表格更可控
  • grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 自动适配列数，无需写多个断点
  • 字段用 <div class="field"> <span class="label">姓名</span><span class="value">张三</span> </div> 显式标注，可访问性更好
  • 注意：若需导出 Excel 或被爬虫抓取为结构化数据，<table> 语义仍不可替代<p>最易被忽略的是 <code>data-label 的维护成本——后端返回 JSON 时就得带字段名映射，前端模板里不能漏填；一旦漏了，移动端卡片就只剩值、没有标签，用户根本不知道这串数字是“订单号”还是“创建时间”。