真要适配手机表格，需每行数据带表头语义竖排，关键是在每个<td>加与<th>文本完全一致的data-label，配合@media隐藏<thead>、tr设display:block、td设display:block及::before{content:attr(data-label)}实现语义化响应式。
手机上表格横向滚动太丑，怎么干掉它
直接加 overflow-x: auto 包一层 <div> 是最常见做法，但用户得左右拖拽，体验差、找不到上下文、还容易误触。这不是“适配”，只是“能看”。真要适配，得让每行数据自成一组，带表头语义地竖着排。
data-label 必须加在每个 <td> 上
这是整个方案的锚点——没有它，小屏下根本不知道“$1,190”对应的是“Amount”还是“Period”。data-label 值必须和对应 <th> 文本完全一致（大小写、空格、标点都要对齐），否则 ::before 插入的内容就错乱。
- 别偷懒写
data-label="amt"，而<th>是Amount -
<td>里如果有scope="row"，也要同步加data-label，比如第一列常是主键，data-label="Account"不能漏 - 如果某列是操作按钮（如“编辑”“删除”），
data-label可设为空字符串或省略，但 CSS 要额外处理:not([data-label])避免插入空白
@media 里 table thead 必须 display: none
不隐藏表头，小屏下它会堆在所有数据上方，占空间又无意义。但注意：只隐藏 <thead>，别动 <caption> —— 它可保留在顶部作为整体标题，用 caption-side: top 控制位置。
- 断点选
max-width: 600px比35.5em更直观，也覆盖主流手机竖屏宽度 -
table tr改为display: block后，border-bottom比border更易控制分隔线，避免上下边框重叠 -
table td设display: block+text-align: right，是为了让::before的表头左对齐、数值右对齐，视觉更清晰
::before 里 content: attr(data-label) 的坑
这个伪元素是核心，但它有几个硬限制：
立即学习“前端免费学习笔记（深入）”；
- 如果
data-label值含中文或特殊符号（如/、-），不用转义，CSS 会原样渲染，但要注意字体是否支持 -
float: left在现代布局中其实已不推荐，改用display: inline-block; width: 40%更稳，尤其当表头文字长度差异大时 - 别给
::before加margin-right，容易破坏对齐；用padding-right或margin-inline-end更安全 - 如果某行有合并单元格（
colspan），data-label逻辑会失效——这种表格压根不该在手机上用“竖排”方案，得换思路（比如折叠为可展开卡片）
data-label 字段，且前端渲染时不能丢。一旦漏一个，整行语义就断了。 
