# 宽表（10+ 列）在工作台 iframe 里被裁掉 / 要适应窄屏

> 触发：用户说「某某列超出页面范围」「列被裁掉了」「缩放调一下」；或新建 10 列以上的表格页。
> 实战：2026-09-23 历史成交价查询（11 列，右侧「次数 / 明细」被裁）。

## 为什么是「被裁」而不是「能滚」

工作台 `index.html` 里 iframe 的包裹 div 是 `overflow:hidden`（为了圆角与固定高度 `calc(100vh - 180px)`）。
因此**表格超出部分是被静默剪掉**：不能拖、不能滚、没有任何提示 —— 用户只能报「看不到/超出」。

## 排查：先量，且必须在窄屏量

```js
const t = document.querySelector('#pqBox table.pw');
const over = t.scrollWidth - document.getElementById('pqBox').clientWidth;   // >0 就是溢出
t.scrollWidth        // 表格自然宽
// 看是哪列把宽度吃掉的：
[].slice.call(t.querySelectorAll('tr')[0].children)
  .map((th,i) => ((th.innerText||'').replace(/\s+/g,'')||'#') + '=' + Math.round(th.getBoundingClientRect().width))
```

**坑：宽屏下量完就宣布「没问题」。** 本页在视口 1280（容器 1170）刚好放下，用户笔记本/窄窗（容器 ~1000）就裁。
验收至少量 **1024**（可用 `cdp('Emulation.setDeviceMetricsOverride', width=1024, height=820, deviceScaleFactor=1, mobile=False)` 直接改视口）。
最宽列往往是「货号」这种**带徽章且 `white-space:nowrap`** 的列（实测 243px）。

## 修法（四招，按顺序；不要上手就 `zoom` / `transform:scale`）

1. **外层包一层 `overflow-x:auto`**（如 `.pqwrap`）：窄屏兜底，从此只会「能横滑」而不是「静默剪掉」。
2. **收窄内边距与字号**：`th/td` padding `8px→6px`、表体 `12.5px→12px`、表头 `12px→11.5px`。
3. **给能折行的列去掉 `nowrap`**：货号列（徽章折到第二行，`white-space:normal`）、
   物料编码 `word-break:break-all`（`3.10.030001.0030` 折两行）、单号同理 + `font-size:11px`。
4. **长文本列改省略号 + `title` 全文**：品名 `max-width:176px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap`。

改表格时注意：表格一般是在 JS 里拼字符串（如 `renderPqTable()`），要同步改 **表头 `<th>`、行 `<td>`、外层包裹**三处；
`esc()` 已转义 `"`，所以 `title="'+esc(name)+'"` 是安全的。明细行 `colspan` 数别忘同步。

## 效果（实测，可直接复用的验收值）

| 视口宽 | 表格宽 / 容器 | 溢出 | 「明细」列右缘 vs 容器右缘 |
|---|---|---|---|
| 1024 | 954 / 954 | 0 | 在页面内 ✅ |
| 1100 | 1030 / 1030 | 0 | 在页面内 ✅ |
| 1280 | 1170 / 1170 | 0 | 在页面内 ✅ |
| 900 | 863 / 830 | — | 外层转为可横滑 ✅ |

展开的明细行（含 BOM 套件块）同样 0 溢出。

## 无头环境里量不到 iframe 宽度时的退路

工作台 Tab 的 iframe 若祖先 `display:none`（Tab 未激活，`switchTab()` 在无头下可能不生效），
量到的是 `clientWidth = 0`，得出的「在页面内」是假通过。
→ 退路：**直接量独立页**（`127.0.0.1:8765/工具/xxx.html`）在 1024/1100/1280 三个宽度的溢出值；
iframe 只是同一页的视口，独立页 0 溢出即代表 iframe 里 0 溢出。顺带确认表格数据渲染出来了（行数 > 0）。