全域鎖定終極版

鎖死 body 和 .gradio-container：強制設定 max-width: 100vw 且 overflow-x: hidden。這會告訴瀏覽器：「不管裡面多大，網頁本身絕對不准出現水平捲軸」。
鎖死元件外層：#booking_table 也必須鎖死在 100% 寬度。
只開放 .table-wrap：這是唯一允許 overflow-x: auto 的地方。

app.py

@@ -131,57 +131,58 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [雙重捲軸修正 CSS] 🔥 ---
+# --- 🔥 [全域鎖定 CSS] 🔥 ---
 custom_css = """
-/* 1. 【鎖死外層】
-   將 #booking_table 及其直接包裝層 (.wrap) 的寬度鎖死在 100%。
-   並且 overflow: hidden 強制切斷超出部分。這會消滅外層捲軸。
-*/
-#booking_table, 
-#booking_table > .wrap,
-#booking_table .gradio-container {
-    width: 100% !important;
+/* 1. 【全域鎖死】殺死瀏覽器層級的外層捲軸 */
+/* 強制設定最外層容器最大寬度為螢幕寬度，並隱藏溢出 */
+.gradio-container, body {
     max-width: 100vw !important;
+    width: 100vw !important;
+    overflow-x: hidden !important; /* 👈 這是殺死長捲軸的關鍵 */
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* 2. 【元件鎖死】殺死 Dataframe 元件層級的捲軸 */
+#booking_table {
+    width: 100% !important;
+    max-width: 100% !important;
     overflow: hidden !important;
-    display: block !important;
+    border: none !important;
 }
 
-/* 2. 【開啟內層】
-   找到真正包含表格的容器 (通常是 table-wrap 或 tbody-wrap)，
-   只讓它擁有 overflow-x: auto。
-*/
-#booking_table .table-wrap,
-#booking_table div[class*="table"],
-#booking_table .tbody-wrap {
+/* 鎖死 Gradio 預設的包裝層 */
+#booking_table .wrap, #booking_table .svelte-12cmxck {
     width: 100% !important;
-    overflow-x: auto !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
+}
+
+/* 3. 【開放內層】這才是我們要的唯一捲軸 */
+#booking_table .table-wrap {
+    width: 100% !important;
+    overflow-x: auto !important; /* 👈 只允許這裡捲動 */
     overflow-y: hidden !important;
     border: 1px solid #444 !important;
-    display: block !important;
+    /* 增加平滑捲動體驗 */
+    -webkit-overflow-scrolling: touch; 
 }
 
-/* 3. 【撐開內容】
-   width: 1470px -> 將表格寬度設定為您所有欄位寬度的總和。
-   table-layout: fixed -> 強制每個欄位遵守寬度設定。
-*/
+/* 4. 【表格定寬】 */
 #booking_table table {
     table-layout: fixed !important;
-    width: 1470px !important; /* 60+170+80+120+120+250+50+180+120+320 = 1470 */
-    min-width: 1470px !important;
+    /* 您的欄位寬度總和是 1470px，這裡設定 1500px 確保有空間 */
+    width: 1500px !important; 
+    min-width: 1500px !important;
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
-/* 4. 【欄位行為】
-   white-space: normal -> 允許換行
-   word-break: break-all -> 強制換行
-*/
+/* 5. 【欄位行為】 */
 #booking_table th, #booking_table td {
-    display: table-cell !important;
-    white-space: normal !important;
+    white-space: normal !important; /* 允許換行 */
+    word-break: break-all !important; /* 強制換行 */
     overflow-wrap: break-word !important;
-    word-break: break-all !important;
-    
     vertical-align: top !important;
     box-sizing: border-box !important;
     padding: 8px 5px !important;
@@ -190,7 +191,7 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 5. 🔥【絕對欄寬】(依照您的指定) */
+/* 6. 🔥【您的指定欄寬】(完全依照數值) */
 #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; }