窄屏宽表不再横向滚动:改成一屏一行的「字段名 + 值」
移动端有 7 张表要横滑 300+px 才看得全,滑着还对不上表头(地点库 8 列、统计 3 张、专题详情、 首页天气、后台数据集表与数据说明、专题管理、报告页 2 张)。给这些表加 tb-stack: 窄屏隐藏 thead、每行一屏一块、每格「字段名 + 值」竖排,值多行时用悬挂缩进。 - 字段名取自 td 的 data-label(首格是这行主角,故意不带标签;操作格给「操作」)—— 这样改列顺序也不会串标签,比把名字写进 CSS 的 nth-child 稳。 - 表格结构、链接、表单、按钮一律没动(只是隐藏 thead + 改 display),桌面与平板仍是原表。 - 断点只用 @media (max-width:620px):试过容器查询(能顺手治掉「宽屏里 g2 窄卡片也要横滑」), 但实测会把 /stats 三个卡片撑高 1300px,太臃肿,不划算。 实测:390/620 十张表需横滑全部为 0、每行每格都有标签;621/700/1440 的横滑量与改动前一致 (桌面零变化);128 个链接/按钮滚动到可见后逐个点测均可点中,无裁切;全站审计 390 站长/访客 + 320 + 1440 溢出全 0、0 JS 报错,小触控与小字数与改动前逐页一致(320 下露外元素 /places 277→2、 /stats 114→12、/admin 46→4,剩下的都是有意的横滑容器)。 新增回归 internal/web/tb_stack_test.go:渲染 7 个页面、逐行核对「每个非首格都有 data-label」 且「格子数 == 表头列数」(变异验证过:去掉一个标签立刻 FAIL)。
This commit is contained in:
@@ -1007,3 +1007,40 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten
|
||||
.filters-card.collapsed > .panel-fold { margin: 0; border-radius: var(--radius); }
|
||||
.filters-card.collapsed > :not(.panel-fold) { display: none; }
|
||||
}
|
||||
|
||||
/* ---------- 窄屏:要横滑的宽表改成一屏一行的「字段 + 值」 ----------
|
||||
地点库(8 列)、统计、专题、后台这几张表在手机上要横滑 300+px 才看得全,滑着还对不上表头。
|
||||
窄屏改成每行一块、每格「字段名 + 值」竖排:不用横滑,也不用记「第几列是什么」。
|
||||
字段名取 td 的 data-label,每行的首格留空当小标题(如地点名),操作格给「操作」。
|
||||
表格结构与脚本都没动(只是隐藏 thead),链接 / 表单 / 按钮照旧;断点跟其它移动端适配一致
|
||||
(620px),桌面与平板仍是原来的表格,一行不差。
|
||||
注:统计页那几张表在宽屏也被放在 g2 的窄卡片里(视口 1440 时卡片只有 494px),仍然要横滑
|
||||
100+px —— 但那属于桌面版式,真要治得单说;这里先只管移动端(按容器宽度判断会让这些卡片
|
||||
在宽屏也竖排,实测把 /stats 撑高 1300px,得不偿失)。 */
|
||||
@media (max-width: 620px) {
|
||||
.tw > table.tb.tb-stack { min-width: 0; }
|
||||
.tw > table.tb.tb-stack thead { display: none; }
|
||||
.tw > table.tb.tb-stack,
|
||||
.tw > table.tb.tb-stack > tbody,
|
||||
.tw > table.tb.tb-stack > tbody > tr,
|
||||
.tw > table.tb.tb-stack > tbody > tr > td { display: block; width: auto; }
|
||||
.tw > table.tb.tb-stack > tbody > tr {
|
||||
padding: 9px 11px; border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
.tw > table.tb.tb-stack > tbody > tr:last-child { border-bottom: 0; }
|
||||
/* 值用悬挂缩进:标签绝对定位在左边,值换行时对齐到值那一栏,而不是缩到标签下面 */
|
||||
.tw > table.tb.tb-stack > tbody > tr > td {
|
||||
position: relative; padding: 2px 0 2px 5.6em; border-bottom: 0;
|
||||
}
|
||||
.tw > table.tb.tb-stack > tbody > tr > td::before {
|
||||
content: attr(data-label); position: absolute; left: 0; top: 2px;
|
||||
width: 5em; color: var(--text-3); font-size: 12px;
|
||||
}
|
||||
/* 首格是这一行的主角(地点名 / 天气 / 方式…):不缩进、字号抬一档当小标题 */
|
||||
.tw > table.tb.tb-stack > tbody > tr > td:not([data-label]) {
|
||||
padding-left: 0; margin-bottom: 2px; font-size: 14px;
|
||||
}
|
||||
/* 数字列不必再右对齐(现在已经是「标签 + 值」两栏) */
|
||||
.tw > table.tb.tb-stack td.num { text-align: left; }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user