由內而外鎖定法 (Inside-Out Locking)

抓到表格本人：設定寬度 1500px。
抓表格的爸爸 (直接容器)：強制 overflow-x: auto (只有這裡要有捲軸)。
抓表格的爺爺、曾爺爺 (外層容器)：強制 overflow-x: hidden (全部殺死，不准有捲軸)

app.py

@@ -131,67 +131,70 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🟢 [JavaScript] 用來強制殺死外層捲軸 ---
-# 這個 JS 會在頁面載入後，每 0.5 秒檢查一次，強制把那些不受控的 wrapper 鎖死
-kill_scroll_js = """
+# --- 🟢 [JavaScript] 精準控制捲軸 ---
+# 這段 JS 負責：
+# 1. 找到表格本體 (table)
+# 2. 找到包著表格的「那一層」div (parent)，強制它顯示捲軸
+# 3. 找到更外層的所有 div (grandparents)，強制它們「不准」顯示捲軸
+force_scroll_js = """
 function() {
-    // 定義一個修復函數
     const fixScroll = () => {
-        const tableComponent = document.querySelector('#booking_table');
-        if (!tableComponent) return;
+        // 1. 找到表格元件
+        const comp = document.querySelector('#booking_table');
+        if (!comp) 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. 找到裡面的 table
+        const table = comp.querySelector('table');
+        if (!table) return;
+
+        // 強制表格寬度 (確保內容撐開)
+        table.style.width = '1500px';
+        table.style.minWidth = '1500px';
+        table.style.tableLayout = 'fixed';
+
+        // 3. 找到直接包著 table 的那一層 div (這是我們要保留捲軸的地方)
+        const innerWrapper = table.parentElement;
+        if (innerWrapper) {
+            innerWrapper.style.overflowX = 'auto'; // 開啟捲軸
+            innerWrapper.style.width = '100%';
+            innerWrapper.style.maxWidth = '100vw'; 
+            innerWrapper.style.display = 'block';
+        }
+
+        // 4. 往上找所有祖先容器，全部殺死捲軸
+        // 這是解決「錯誤捲軸」或「雙重捲軸」的關鍵
+        let parent = innerWrapper.parentElement;
+        while (parent && parent.id !== 'booking_table') {
+            parent.style.overflowX = 'hidden'; // 隱藏外層捲軸
+            parent.style.width = '100%';
+            parent = parent.parentElement;
         }
+        
+        // 確保最外層也沒有捲軸
+        if(comp) comp.style.overflowX = 'hidden';
     };
 
-    // 立即執行一次
+    // 執行邏輯
     fixScroll();
-    
-    // 每 500ms 執行一次，以防 Gradio 重新渲染後失效
-    setInterval(fixScroll, 500);
+    setInterval(fixScroll, 500); // 防止 Gradio 重繪後失效
 }
 """
 
-# --- 🔥 [CSS] 定寬 + 換行設定 ---
+# --- 🔥 [CSS] 定寬 + 換行 + 隱藏全域捲軸 ---
 custom_css = """
-/* 1. 元件外框鎖死 */
-#booking_table {
+/* 1. 全域設定：防止網頁被撐開 */
+body, .gradio-container {
+    overflow-x: hidden !important;
     max-width: 100vw !important;
-    overflow: hidden !important; 
-    border: none !important;
 }
 
 /* 2. 表格內容設定 */
-#booking_table table {
-    table-layout: fixed !important;
-    width: 1500px !important; 
-    min-width: 1500px !important;
-    border-collapse: collapse !important;
-    margin: 0 !important;
-}
-
-/* 3. 欄位設定：允許換行 */
+/* 這裡只負責欄位的樣式，捲軸交給 JS 控制 */
 #booking_table th, #booking_table td {
-    white-space: normal !important; 
-    word-break: break-all !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;
@@ -200,17 +203,17 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 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; }
-#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; }
-#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; }
-#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; }
-#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; }
-#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; }
-#booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; }
-#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; }
+/* 3. 🔥 個別欄位寬度 (同時設定 width, min-width, max-width 確保不動如山) */
+#booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; min-width: 60px !important; max-width: 60px !important; }
+#booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; min-width: 170px !important; max-width: 170px !important; }
+#booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; min-width: 80px !important; max-width: 80px !important; }
+#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
+#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
+#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; min-width: 250px !important; max-width: 250px !important; }
+#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; min-width: 50px !important; max-width: 50px !important; }
+#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; min-width: 180px !important; max-width: 180px !important; }
+#booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
+#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; min-width: 320px !important; max-width: 320px !important; }
 """
 
 # --- 介面開始 ---
@@ -248,8 +251,8 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
         outputs=[login_row, admin_row, error_msg]
     )
     
-    # 🔥🔥🔥 關鍵：頁面載入時執行 JS 來修復捲軸 🔥🔥🔥
-    demo.load(None, js=kill_scroll_js)
+    # 🔥🔥🔥 啟動 JS 修復程式 🔥🔥🔥
+    demo.load(None, js=force_scroll_js)
 
 if __name__ == "__main__":
     demo.launch()