結構穿透修正版

用 CSS 子代選擇器 (>) 來實施 「精準斬首」： 我們直接命令 #booking_table 底下的所有第一層 div 都不准捲動，只准更深層的表格捲動。

app.py

@@ -131,58 +131,60 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [全域鎖定 CSS] 🔥 ---
+# --- 🔥 [結構穿透 CSS]：精準殺死中層捲軸 🔥 ---
 custom_css = """
-/* 1. 【全域鎖死】殺死瀏覽器層級的外層捲軸 */
-/* 強制設定最外層容器最大寬度為螢幕寬度，並隱藏溢出 */
-.gradio-container, body {
+/* 1. 【全域鎖死】 
+   防止整個頁面因為表格太寬而產生瀏覽器級別的水平捲軸
+*/
+body, .gradio-container {
+    overflow-x: hidden !important;
     max-width: 100vw !important;
-    width: 100vw !important;
-    overflow-x: hidden !important; /* 👈 這是殺死長捲軸的關鍵 */
-    padding: 0 !important;
-    margin: 0 !important;
 }
 
-/* 2. 【元件鎖死】殺死 Dataframe 元件層級的捲軸 */
+/* 2. 【ID層鎖死】 
+   鎖定我們指定的元件外層
+*/
 #booking_table {
-    width: 100% !important;
-    max-width: 100% !important;
     overflow: hidden !important;
+    max-width: 100% !important;
     border: none !important;
 }
 
-/* 鎖死 Gradio 預設的包裝層 */
-#booking_table .wrap, #booking_table .svelte-12cmxck {
-    width: 100% !important;
-    max-width: 100% !important;
+/* 3. 🔥【關鍵修正：殺死中間層】🔥
+   選取 #booking_table 底下的「直接子元素 div」。
+   這通常就是那個帶有 'wrap' class 且預設 overflow:auto 的傢伙。
+   我們強制把它隱藏，這就是您一直在找的「外層捲軸」控制點！
+*/
+#booking_table > div {
     overflow: hidden !important;
+    border: none !important;
 }
 
-/* 3. 【開放內層】這才是我們要的唯一捲軸 */
+/* 4. 【復活內層】
+   找到真正包含 table 的那一層 (通常是 .table-wrap)，只有這裡可以捲動。
+*/
 #booking_table .table-wrap {
-    width: 100% !important;
-    overflow-x: auto !important; /* 👈 只允許這裡捲動 */
+    overflow-x: auto !important;
     overflow-y: hidden !important;
     border: 1px solid #444 !important;
-    /* 增加平滑捲動體驗 */
-    -webkit-overflow-scrolling: touch; 
 }
 
-/* 4. 【表格定寬】 */
+/* 5. 【表格定寬】(您的設定) */
 #booking_table table {
     table-layout: fixed !important;
-    /* 您的欄位寬度總和是 1470px，這裡設定 1500px 確保有空間 */
     width: 1500px !important; 
     min-width: 1500px !important;
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
-/* 5. 【欄位行為】 */
+/* 6. 【欄位行為】 */
 #booking_table th, #booking_table td {
-    white-space: normal !important; /* 允許換行 */
-    word-break: break-all !important; /* 強制換行 */
+    display: table-cell !important;
+    white-space: normal !important;
     overflow-wrap: break-word !important;
+    word-break: break-all !important;
+    
     vertical-align: top !important;
     box-sizing: border-box !important;
     padding: 8px 5px !important;
@@ -191,7 +193,7 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 6. 🔥【您的指定欄寬】(完全依照數值) */
+/* 7. 【欄位寬度】 */
 #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; }