移动端表格垂直堆叠应采用语义化结构+媒体查询+css重排：为添加data-label属性，小屏下隐藏原生表头、将设为块级并用伪元素显示标签，配合table-layout: fixed保障桌面端稳定性。

直接让表格在手机上垂直堆叠，核心不是强行改 `` 的 display，而是用语义化结构 + 媒体查询 + CSS 重排，把每行数据变成一个独立阅读区块。

用 data-label 实现语义化堆叠

保留表格原始结构，但为每个 `

` 添加 `data-label` 属性，标明它对应的表头含义：

• <th>姓名</th> <th>邮箱</th> <th>注册时间</th>
• <td data-label="姓名">王五</td> <td data-label="邮箱">wangwu@example.com</td> <td data-label="注册时间">2026-08-12</td>

这样既不破坏 HTML 语义，又为移动端提供可读标签来源。

媒体查询中关闭表格布局，启用块级流

在 ≤768px 断点内，放弃 `

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

` 的默认渲染逻辑：

• 对 `

` 应用 display: none，隐藏原生表头

对 `

` 设 display: block; margin-bottom: 1rem，让它成为独立区块

对 `

` 设 display: block; position: relative，再用伪元素插入标签：::before { content: attr(data-label) ": "; font-weight: bold; } 可选：加 border-bottom: 1px solid #eee 区分每条记录 配合 table-layout: fixed 防止桌面端撑破容器 即使不堆叠，也要提前加固桌面表现： table { table-layout: fixed; width: 100%; } 至少给一列设显式宽度，例如 <th style="width: 25%">姓名</th> 搭配 word-wrap: break-word 或 text-overflow: ellipsis 处理长文本 避免用 visibility: hidden 隐藏单元格——它留白，会错位 不推荐的“捷径”要避开 这些做法看似简单，实际引发问题： 只对 `	` 用 display: none 却不处理对应 `	` → 表头与数据列数不一致，浏览器自动补空或压缩，结果不可控 用 transform: scale(0.8) 缩放整个表格 → 文字变小难点击，交互区域失真 依赖 overflow-x: auto 单纯加滚动条 → 用户不知道有内容可滑，且无法快速定位字段含义 不复杂但容易忽略。关键在于把“表格”当成数据容器，而不是固定布局工具。

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