不可行。原生无法通过纯css转为卡片，因display:block对无效且会丢失布局上下文；推荐双结构+@media切换，或改用grid模拟表格布局。
手机端直接隐藏表格、用CSS生成卡片结构可行吗？
不可行。原生 <table> 的语义和渲染逻辑决定了它无法通过纯 CSS 把 <code><tr> 拆成独立卡片块——<code>display: block 对 <tr> 无效，且 <code><td> 在非表格上下文中会丢失布局上下文，多数浏览器会忽略其样式或触发怪异模式。
<p>真正能落地的做法只有两种：要么用 JavaScript 动态重构 DOM，要么提前写两套结构（桌面用 <code><table>，移动端用 <code><div class="card">），再用媒体查询控制显隐。
<h3>推荐方案：双结构 + <code>@media 切换显示
这是最稳定、语义清晰、无障碍友好的方式。核心是写一份语义化数据源（比如 JSON 或服务端模板），分别渲染出两套 DOM，再靠 CSS 控制哪套可见。
- 桌面端只显示
<table>，移动端只显示 <code><div class="card-list"> <li>用 <code>@media (max-width: 768px)控制切换，避免在小屏加载无用的表格样式 <table> 保留 <code>role="presentation"（如纯展示）或完整语义（如有数据可排序/筛选），<div class="card"> 每项用 <code>role="region"+aria-labelledby保证可访问性- 两套结构字段顺序必须严格一致，否则维护成本飙升
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: none;
}
.card-list {
display: block;
}
}
@media (min-width: 769px) {
.card-list {
display: none;
}
}
如果坚持单 HTML 结构，只能用 display: grid 模拟卡片流
适用于简单二维数据（如「姓名｜职位｜部门」三列），且能接受语义退化。关键点不是“把 table 变成卡片”，而是“让普通 div 按表格逻辑排版，再在小屏重排为垂直卡片”。
- 放弃
<table>，改用 <code><div class="table-grid"> 包裹 <code><div class="row">，每个 <code><div class="cell"> 对应一格 <li>桌面端用 <code>display: grid+grid-template-columns模拟表格列宽 - 移动端将
.row设为display: block，.cell设为display: flex+flex-direction: column，再加label:after插入字段名（需data-label属性支持） - 注意：这种方案无法支持表头冻结、跨行跨列、排序交互等原生表格能力
<div class="row"> <div class="cell" data-label="姓名">张三</div> <div class="cell" data-label="职位">前端工程师</div> <div class="cell" data-label="部门">技术部</div> </div>
容易被忽略的细节：字体缩放与横向滚动陷阱
很多团队以为加了 overflow-x: auto 就万事大吉，结果用户双指放大后卡片文字溢出、按钮错位、甚至触发横向滚动条——这说明响应式没真正生效。
- 务必设置
meta name="viewport"为width=device-width, initial-scale=1，禁用用户缩放（user-scalable=no）仅在极特殊场景考虑 - 卡片内文字用
rem或clamp()（如font-size: clamp(0.875rem, 4vw, 1rem)），避免小屏下文字过小或撑破容器 - 所有卡片宽度必须用
%或max-width，禁止写死px值；边框/阴影用thin或0.5px（配合transform: scale(0.5)实现高清线） - 测试真机时重点看 iOS Safari —— 它对
overflow-x: auto内部display: grid的兼容性最差，常需加-webkit-overflow-scrolling: touch
