JS 強制介入版

CSS：負責「定寬」和「換行」（這部分您之前滿意了）。
JavaScript：負責「抓出那個撐大的外層容器」，直接把它的捲軸殺掉。

app.py

@@ -131,45 +131,54 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [結構穿透 CSS]：精準殺死中層捲軸 🔥 ---
-custom_css = """
-/* 1. 【全域鎖死】 
-   防止整個頁面因為表格太寬而產生瀏覽器級別的水平捲軸
-*/
-body, .gradio-container {
-    overflow-x: hidden !important;
-    max-width: 100vw !important;
-}
+# --- 🟢 [JavaScript] 用來強制殺死外層捲軸 ---
+# 這個 JS 會在頁面載入後，每 0.5 秒檢查一次，強制把那些不受控的 wrapper 鎖死
+kill_scroll_js = """
+function() {
+    // 定義一個修復函數
+    const fixScroll = () => {
+        const tableComponent = document.querySelector('#booking_table');
+        if (!tableComponent) return;
+
+        // 1. 找到所有中間層 (wrapper)
+        // 這些 div 通常是 Gradio 自動生成的，就是它們在搞鬼
+        const wrappers = tableComponent.querySelectorAll('div');
+        
+        wrappers.forEach(div => {
+            // 如果這個 div 不是真正包著 table 的那個 (table-wrap)
+            // 而且它有水平捲軸，就強制殺掉它
+            if (!div.classList.contains('table-wrap') && div.scrollWidth > div.clientWidth) {
+                div.style.overflowX = 'hidden';
+                div.style.maxWidth = '100vw'; // 強制不准超過螢幕
+            }
+        });
+
+        // 2. 確保最內層可以捲動
+        const innerScroller = tableComponent.querySelector('.table-wrap');
+        if (innerScroller) {
+            innerScroller.style.overflowX = 'auto';
+            innerScroller.style.maxWidth = '100vw'; // 確保捲動容器本身也不超過螢幕
+        }
+    };
 
-/* 2. 【ID層鎖死】 
-   鎖定我們指定的元件外層
-*/
-#booking_table {
-    overflow: hidden !important;
-    max-width: 100% !important;
-    border: none !important;
+    // 立即執行一次
+    fixScroll();
+    
+    // 每 500ms 執行一次，以防 Gradio 重新渲染後失效
+    setInterval(fixScroll, 500);
 }
+"""
 
-/* 3. 🔥【關鍵修正：殺死中間層】🔥
-   選取 #booking_table 底下的「直接子元素 div」。
-   這通常就是那個帶有 'wrap' class 且預設 overflow:auto 的傢伙。
-   我們強制把它隱藏，這就是您一直在找的「外層捲軸」控制點！
-*/
-#booking_table > div {
-    overflow: hidden !important;
+# --- 🔥 [CSS] 定寬 + 換行設定 ---
+custom_css = """
+/* 1. 元件外框鎖死 */
+#booking_table {
+    max-width: 100vw !important;
+    overflow: hidden !important; 
     border: none !important;
 }
 
-/* 4. 【復活內層】
-   找到真正包含 table 的那一層 (通常是 .table-wrap)，只有這裡可以捲動。
-*/
-#booking_table .table-wrap {
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
-    border: 1px solid #444 !important;
-}
-
-/* 5. 【表格定寬】(您的設定) */
+/* 2. 表格內容設定 */
 #booking_table table {
     table-layout: fixed !important;
     width: 1500px !important; 
@@ -178,13 +187,11 @@ body, .gradio-container {
     margin: 0 !important;
 }
 
-/* 6. 【欄位行為】 */
+/* 3. 欄位設定：允許換行 */
 #booking_table th, #booking_table td {
-    display: table-cell !important;
-    white-space: normal !important;
-    overflow-wrap: break-word !important;
+    white-space: normal !important; 
     word-break: break-all !important;
-    
+    overflow-wrap: break-word !important;
     vertical-align: top !important;
     box-sizing: border-box !important;
     padding: 8px 5px !important;
@@ -193,7 +200,7 @@ body, .gradio-container {
     line-height: 1.4 !important;
 }
 
-/* 7. 【欄位寬度】 */
+/* 4. 🔥 個別欄位寬度 (您指定的) */
 #booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; }
 #booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; }
 #booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; }
@@ -240,6 +247,9 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
         inputs=[username_input, password_input], 
         outputs=[login_row, admin_row, error_msg]
     )
+    
+    # 🔥🔥🔥 關鍵：頁面載入時執行 JS 來修復捲軸 🔥🔥🔥
+    demo.load(None, js=kill_scroll_js)
 
 if __name__ == "__main__":
     demo.launch()