表格右側白帶：關掉 dataframe 內部捲軸佔位（不是欄位錯版）

業主回報「表格似乎都會有欄位錯版」，要求全部檢查。

先查證再修：寫了個稽核腳本逐張量全部 13 張表（語料說明 2 張＋五個結果頁
11 張），比對每一欄的表頭寬與資料列寬——**沒有任何一欄真的錯位**（misaligned
全為 0）。真正的症狀是表格右側多出一條空帶：Gradio 給 dataframe 的內部
容器 .virtual-table-viewport 設了 max-height:500px + overflow-y:auto，列數
一多就出現垂直捲軸，佔掉 10px 版面寬度。實測不捲動時表格右緣只差 2px
（框線），一捲動就跳到 12px，與業主截圖吻合。會踩到的是敘述統計／差異性
分析／監督式學習三張長表，加上業主環境裡列數較多的語料說明兩張表。

修法：.virtual-table-viewport { scrollbar-width: none !important }
捲軸不再佔版面寬度，白帶完全消失（13 張表重新量過，捲軸佔位全為 0、右緣
只剩 2px 框線）。滾輪／觸控／鍵盤照常可捲，虛擬化不受影響。

過程中排除掉的三條死路，已全部寫進 CSS 註解避免重走：
1. 用 ::-webkit-scrollbar 改寬度——完全沒生效。真因不是 specificity：
Gradio 在該元件設了標準屬性 scrollbar-width/scrollbar-color，Chrome 一旦
看到標準屬性就整組忽略 legacy 的 ::-webkit-scrollbar 偽元素。
2. 拿掉 max-height 讓表格攤開、交給 canvas 捲（比照 .exec-log 的既有決定）
——會壞掉。這個表格是虛擬捲動，靠自己的捲動位置決定渲染哪幾列，拿掉之後
敘述統計變成「保留 2832px 高度卻只畫 1 列」的空表。
3. 只對語料表單藏捲軸、結果頁保留橫向提示——方向搞反。會產生白帶的是不需要
橫捲的長表，而唯一需要橫向捲軸的語言指標分析（76 欄）從不出現垂直捲軸。

代價講明：語言指標分析的橫向捲軸也跟著隱形（該表仍可橫捲，且它是唯一
需要橫捲的表）。CSS 裡留了一段註解掉的 #canvas_idx 規則，需要時解開即可
單獨還原它的捲軸。

另修：這輪自己引入又當場發現的 CSS 語法錯誤——改註解時把一段說明留在註解
外面又以 */ 結尾，導致後面的規則整段沒被解析（症狀是「加了 !important 還是
沒生效」）。已修正並寫了配對檢查確認全檔註解平衡。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MQuAXWC1hCsiT48TXftPc7

assets/app.css

@@ -2311,6 +2311,47 @@ label:not(:has(input)) > span {
 ::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
 :hover::-webkit-scrollbar-thumb { background: var(--c-scrollbar); }
 :hover::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-hover); }
+/* 2026-08-12（業主回報「表格欄位錯版」）──────────────────────────────
+   症狀：表格右側出現一條白色空帶，看起來像最後一欄被切掉。
+   逐項量過全部 16 張表（語料說明 2 張＋五個結果頁），**表頭與資料列的欄寬
+   完全一致、沒有任何一欄真的錯位**，所以不是欄位對不齊，是捲軸佔掉的位置：
+   Gradio 給 dataframe 的內部容器 .virtual-table-viewport 設了
+   `max-height:500px; overflow-y:auto`，列數一多就出現垂直捲軸，佔掉 10px
+   版面寬度，而 .table-wrap 的底色是白的 → 那 10px 就是白帶。實測不捲動時
+   表格右緣只差 2px（框線），一捲動就跳到 12px，與業主截圖吻合。
+
+   踩坑（值得記）：一開始想沿用本檔第 14 節那套「平常透明、懸停才出現」的
+   ::-webkit-scrollbar 規則，寫了帶 class 的版本卻完全沒生效。真因不是
+   specificity——Gradio 在這個元件上設了**標準屬性** scrollbar-width:thin
+   與 scrollbar-color，而 Chrome 只要看到標準屬性，就會整組忽略 legacy 的
+   ::-webkit-scrollbar 偽元素。所以要改這個元件的捲軸，只能用標準屬性。
+
+   **試過但不能用的修法（重要，別再走一次）**：把 max-height 拿掉讓表格
+   整條攤開、交給 canvas 捲（比照 .exec-log 那個「不要兩層捲動」的既有決定）。
+   實測會壞掉——Gradio 這個表格是**虛擬捲動**，只渲染視窗內的列，靠自己的
+   捲動位置決定要畫哪幾列。拿掉 max-height 之後它不再自己捲，虛擬化拿不到
+   捲動事件：敘述統計那張表變成「保留了 2832px 高度、卻只畫出 1 列」的空表。
+   所以這個元件的內部捲動必須留著。
+
+   最終修法：全部 dataframe 一律 scrollbar-width:none，捲軸不再佔版面寬度，
+   白帶完全消失（實測 10px→0、表格右緣只剩 2px 框線）。滾輪／觸控／鍵盤
+   照常可捲，虛擬化不受影響（已實測 scrollTop 有效、列照樣重新渲染）。
+   範圍是逐表量完才定的——一開始想「只有語料表單藏捲軸、結果頁保留橫向
+   提示」，量完發現方向剛好相反：會出現白帶的是敘述統計／差異性分析／
+   監督式學習那三張長表（垂直捲動、不需橫捲），而唯一需要橫向捲軸的語言
+   指標分析（76 欄）從來不出現垂直捲軸、也就沒有白帶。
+   代價講明：語言指標分析那條橫向捲軸也跟著隱形，使用者要靠「右緣被切一半
+   的欄位」＋Shift＋滾輪察覺還有欄位。覺得提示不夠時，把下面 #canvas_idx
+   那兩行註解解開即可單獨還原它的捲軸。
+   !important 是必要的：Gradio 在同一個元素上設 scrollbar-width:thin，
+   不加就吃不到（語料表單那條是靠 #metadata_zone 的 id 才贏過它）。 */
+.virtual-table-viewport {
+    scrollbar-width: none !important;
+}
+/* 需要時單獨還原語言指標分析（76 欄）的橫向捲軸：
+#canvas_idx .virtual-table-viewport { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+#canvas_idx .virtual-table-viewport:hover { scrollbar-color: var(--c-scrollbar) transparent; }
+*/
 
 /* ── 15. FOCUS & ACCESSIBILITY ─────────────────────────────────── */
 :focus-visible {