外層鎖死，內層撐開

鎖死外層：強制 #booking_table 這個元件的寬度絕對不能超過螢幕寬度 (max-width: 100vw)，且超出部分直接切掉 (overflow: hidden)。這會殺死最外面的捲軸。
撐開內層：裡面的 table 強制設為 1500px，逼迫中間層 (.table-wrap) 必須產生捲軸。
欄位定寬：完全照您給的像素設定。

app.py

@@ -131,44 +131,46 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [絕對定寬 + 單一捲軸 CSS] 🔥 ---
+# --- 🔥 [終極修正 CSS] 🔥 ---
 custom_css = """
-/* 1. 殺掉外層捲軸：Gradio 的 Dataframe 外層預設會有 .wrap 導致雙重捲軸 */
+/* 1. 【鎖死外層】解決雙重捲軸的關鍵 */
+#booking_table {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100vw !important; /* 👈 絕對不准超過螢幕寬度 */
+    overflow: hidden !important; /* 👈 超出部分直接切掉，殺死外層捲軸 */
+    padding: 0 !important;
+}
+
+/* 確保 Gradio 預設的 wrap 不會搗亂 */
 #booking_table .wrap {
-    overflow: hidden !important; 
-    border: none !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
 }
 
-/* 2. 保留內層捲軸：只允許這一層捲動 */
-#booking_table .table-wrap, 
-#booking_table div[class*="table"] {
-    overflow-x: auto !important;
+/* 2. 【開啟內層】只允許這裡捲動 */
+#booking_table .table-wrap {
+    width: 100% !important;
+    overflow-x: auto !important; /* 👈 水平捲軸 */
     overflow-y: hidden !important;
     border: 1px solid #444 !important;
 }
 
-/* 3. 表格設定：
-   width: 1500px -> 【關鍵】設定一個大於所有欄位總和的寬度 (60+170+80+120+120+250+50+180+120+320 = 1470px)
-   table-layout: fixed -> 強制依照下方設定的寬度渲染，不讓瀏覽器壓縮
-*/
+/* 3. 【撐開表格】 */
 #booking_table table {
     table-layout: fixed !important;
-    width: 1500px !important; 
-    min-width: 1500px !important;
+    width: 1600px !important; /* 👈 硬性設定總寬度，總和大約是您各欄位加總 */
+    min-width: 1600px !important;
     border-collapse: collapse !important;
-    margin: 0 !important;
 }
 
-/* 4. 通用欄位設定：
-   white-space: normal -> 【關鍵】允許換行
-   word-break: break-all -> 強制長單字(如User ID)換行
-*/
+/* 4. 【欄位行為】 */
 #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;
@@ -177,7 +179,7 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 5. 🔥【絕對欄位寬度】(依照您的指定) */
+/* 5. 🔥【絕對欄寬】(依照您的指定) */
 #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; }
@@ -207,7 +209,7 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
         gr.Markdown("# 🍷 訂位管理後台 (Dashboard)")
         refresh_btn = gr.Button("🔄 重新整理")
         
-        # ✅ elem_id 保持為 booking_table，這是 CSS 抓取的關鍵
+        # ✅ elem_id 保持為 booking_table
         booking_table = gr.Dataframe(interactive=False, elem_id="booking_table")
         
         with gr.Row():