宽表格在手机上必须能看，卡片化改造怎么写

后台报表在手机上是六列小格子，字挤在一起无法阅读。乍看像缓存或者权限的锅，追下去往往不是。

@media (max-width: 640px) {
  table, tbody, tr, td { display: block; width: 100%; }
  td::before { content: attr(data-label) ': '; color: #888; }
}

追下去是这么回事：表格仍按桌面布局渲染，没有针对窄屏重排字段。

「移动端表格适配」这类改动最怕改一半，回滚脚本先准备好，再动生产。接口问题先分清是没发出去、发出去了没收到，还是收到了处理失败。

偶发问题先统计频率，一小时几次和一天一次，查法完全不同。改完顺手把文档补一句，省得下次自己重新推一遍。

监控和日志的时间要对上，时区不一致会多绕很大一圈。临时改动用注释写上日期和原因，过两周自己都记不清为什么这么写。

动手前把原文件复制一份带时间戳，出问题立刻换回去，比现场分析快得多。一次只改一处，改完立刻验证，几个改动叠在一起，出问题就说不清是谁导致的。

具体做法是，窄屏时把每行转成卡片；用属性标记字段名；隐藏次要列。

验收就看一点，手机端每行显示为字段卡片，无需横向拖动。