后台数据列表必须用而非布局，因其语义正确、支持表头冻结、可访问性好、导出打印可靠；需规范使用等标签，并兼顾键盘导航与响应式设计。

表格结构必须用 <table> 而不是 <code><div> 布局 <p>后台数据列表本质是二维关系型结构，<code><table> 语义正确、天然支持表头冻结、列宽自动对齐、屏幕阅读器识别，而用 <code><div> + CSS Grid/Flex 模拟表格会丢失语义、破坏可访问性、且在 Safari 或旧版 Edge 中容易错行。尤其当表格需要导出 Excel 或打印时，<code><table> 是唯一可靠选择。 <p>常见错误是把 <code><tr> 直接塞进 <code><div class="table-wrapper">，结果导致 <code>aria-describedby 失效、键盘导航跳过整行、NVDA 屏读器读不出行列关系。

• 必须用 <thead> 包裹 <code><th>，不能只靠 CSS 样式“看起来像表头” <li><code><tbody> 必须存在，哪怕空着；<code><tfoot> 在有合计行时才加 <li>每列 <code><th> 应带 <code>scope="col"，每行 <td> 对应的 <code><th> 要用 <code>id + headers 属性关联（尤其跨行合并时）

  响应式表格在小屏上不塌缩，而是横向滚动

  很多模板强行把表格改成卡片流或折叠展开，反而增加操作路径——管理员查一条记录要点三次才能看到全部字段。真实后台场景中，用户更愿横向拖动看全字段，而不是反复切换视图。

  关键不是隐藏列，而是控制最小宽度和溢出行为：

  • 给 <table> 外层加 <code><div class="table-responsive">，设 <code>overflow-x: auto 和 -webkit-overflow-scrolling: touch
  • <th> 和 <code><td> 设 <code>min-width: 120px（避免文字被压扁），用 white-space: nowrap 防换行
  • 禁用 table-layout: fixed —— 它会让内容截断，且无法随字体大小缩放

  <colgroup></colgroup> 是控制列样式最稳定的方式

  用 CSS 类给每列 <td> 单独设宽或背景色，会在增删列时大面积改代码；用 <code>:nth-child() 则在插入操作列（如编辑按钮）后全部错位。真正解耦列定义与内容的是 <colgroup></colgroup>。

  它允许你在 HTML 结构里直接声明列行为，JS 动态插入行也不影响列样式：

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

  <colgroup>
  <col width="60" class="text-center">
  <col width="180" class="text-left">
  <col width="120" class="text-right">
  <col width="200">
  </colgroup>

  • width 值建议用像素，避免百分比在窄屏下崩坏
  • 列宽总和不必等于容器宽，浏览器会按比例分配剩余空间
  • 配合 <thead> 中 <code><th> 的 <code>data-col="0" 属性，JS 操作某列时可精准定位

    表格交互状态不能只靠 hover，必须支持 focus 和 keyboard

    后台用户大量使用键盘导航（Tab / Shift+Tab / Arrow 键），仅写 :hover 样式会导致键盘用户完全看不到当前焦点行。更糟的是，有些模板用 JS 绑定 mouseenter 来高亮，结果触屏设备失效、辅助技术不可见。

    • 给 <tr> 加 <code>tabindex="0"，并设 outline: 2px solid #007bff（不要移除 outline）
    • 用 :focus-within 控制整行聚焦态，而非监听 JS 事件
    • 选中态（如 checkbox 行选中）用 [aria-selected="true"] 而非自定义 class，确保 VoiceOver 和 JAWS 正确播报

    复杂点在于：表格行内嵌操作按钮（编辑/删除）时，焦点管理容易混乱。最简方案是让 <tr> 可聚焦，但按钮仍保持独立 tab 顺序——这样既满足键盘浏览，又保留细粒度操作能力。</tr>