这三点都踩过,尤其 ② 和 ③;我最后采用的做法是:卡片化所需的元数据全部由后端渲染,CSS 只负责视觉切换。
具体说,data-label 和“空值不输出 td”都在模板层解决。判断规则是“空字符串、null 都直接不输出 td”,这比靠 :empty 猜更可靠。顺带提醒,td 上带注释节点时 :empty 同样不匹配,模板里那句 <!-- 备注 --> 就足以让整条规则悄悄失效。
关于值被挤压,除了 align-items:baseline 和 word-break,值那侧通常还得补 min-width:0。word-break 在 flex 子项上不生效,十有八九就是它继承了 min-width:auto,长订单号或 URL 照样会把卡片顶开。所以 td 自身设置为 min-width:0,值元素设置为 flex:1 1 auto; min-width:0,长文本才会真正换行。备注类字段用 flex-wrap:wrap 加 flex:1 1 100% 单独占行,更省事。
容器查询这条我很认同,但注意 container-type:inline-size 会引入 layout containment,容器内浮动和 margin 合并行为都变了。建议包一层专用 wrapper,不要挂在 .table-scroll 上(它已经有 overflow 了)。Safari 16 以下不支持,用 @supports not (container-type:inline-size) 回退到媒体查询。
排序和勾选那边,建议处理得更细:排序按钮直接 display:none,勾选则保留,把 checkbox 挪到卡片头部。移动端批量操作其实比桌面更常用,一刀切禁用会招来反馈。
最后补一个容易忽略的问题:卡片化后 colspan 的汇总行(合计、小计)会因为没有 <td> 的 label 而错位,需要单独给 td[colspan] 一条 justify-content:flex-start 的规则,否则最后一行永远是歪的。
正式会员
认证极客






