單一捲軸 + 定寬換行修正版

殺死外層捲軸：鎖定 #booking_table .wrap 和 gradio-container 相關層級，強制 overflow: hidden。
鎖定表格總寬度：既然我們要把欄位設死，那表格總寬度就必須是所有欄位寬度的總和（約 1500px）。我會直接設定 width: 1500px !important，這能確保只有這一個層級會產生捲動。
強制欄位行為：使用 fixed 佈局 + break-word 斷行，完全依照您指定的像素。

app.py

@@ -131,58 +131,66 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [客製化 CSS]：針對每個欄位設定寬度 + 允許換行 ---
+# --- 🔥 [絕對定寬 + 單一捲軸 CSS] 🔥 ---
 custom_css = """
-/* 1. 外層容器：允許左右滑動 */
-.table-wrap, .wrap, .svelte-12cmxck, div[id^="dataframe"] {
+/* 1. 殺掉外層捲軸：Gradio 的 Dataframe 外層預設會有 .wrap 導致雙重捲軸 */
+#booking_table .wrap {
+    overflow: hidden !important; 
+    border: none !important;
+}
+
+/* 2. 保留內層捲軸：只允許這一層捲動 */
+#booking_table .table-wrap, 
+#booking_table div[class*="table"] {
     overflow-x: auto !important;
-    display: block !important;
+    overflow-y: hidden !important;
+    border: 1px solid #444 !important;
 }
-/* 2. 表格本體 */
-table { 
-    display: table !important;
-    table-layout: fixed !important; /* ⚠️ 關鍵：固定布局，強制生效我們設定的寬度 */
-    width: auto !important; 
+
+/* 3. 表格設定：
+   width: 1500px -> 【關鍵】設定一個大於所有欄位總和的寬度 (60+170+80+120+120+250+50+180+120+320 = 1470px)
+   table-layout: fixed -> 強制依照下方設定的寬度渲染，不讓瀏覽器壓縮
+*/
+#booking_table table {
+    table-layout: fixed !important;
+    width: 1500px !important; 
+    min-width: 1500px !important;
     border-collapse: collapse !important;
     margin: 0 !important;
 }
-/* 3. 通用儲存格設定 */
-th, td { 
+
+/* 4. 通用欄位設定：
+   white-space: normal -> 【關鍵】允許換行
+   word-break: break-all -> 強制長單字(如User ID)換行
+*/
+#booking_table th, #booking_table td {
     display: table-cell !important;
-    white-space: normal !important;  /* ✅ 允許換行 */
-    word-break: break-word !important; /* ✅ 長單字(如User ID)強制換行 */
-    vertical-align: top !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 10px !important;
+    padding: 8px 5px !important;
     border: 1px solid #444 !important;
-    font-size: 14px !important;
+    font-size: 13px !important;
     line-height: 1.4 !important;
 }
-/* 4. 🔥【個別欄位寬度設定】(依照您的欄位順序 1~10) */
-/* #1 id: 短數字 */
-th:nth-child(1), td:nth-child(1) { min-width: 60px !important; width: 60px !important; }
-/* #2 date: 日期 (2026-01-23) */
-th:nth-child(2), td:nth-child(2) { min-width: 170px !important; width: 170px !important; }
-/* #3 time: 時間 (19:30) */
-th:nth-child(3), td:nth-child(3) { min-width: 80px !important; width: 80px !important; }
-/* #4 name: 姓名 */
-th:nth-child(4), td:nth-child(4) { min-width: 120px !important; width: 120px !important; }
-/* #5 tel: 電話 */
-th:nth-child(5), td:nth-child(5) { min-width: 120px !important; width: 120px !important; }
-/* #6 email: 電子信箱 (很長，給寬一點) */
-th:nth-child(6), td:nth-child(6) { min-width: 250px !important; width: 250px !important; }
-/* #7 pax: 人數 (短) */
-th:nth-child(7), td:nth-child(7) { min-width: 50px !important; width: 50px !important; }
-/* #8 remarks: 備註 (文字多，給寬一點) */
-th:nth-child(8), td:nth-child(8) { min-width: 180px !important; width: 180px !important; }
-/* #9 status: 狀態 */
-th:nth-child(9), td:nth-child(9) { min-width: 120px !important; width: 120px !important; }
-/* #10 user_id: 亂碼 (非常長，給寬一點，反正會換行) */
-th:nth-child(10), td:nth-child(10) { min-width: 280px !important; width: 320px !important; }
+
+/* 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; }
+#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; }
 """
 
-# --- 介面開始 (加入 css 參數) ---
+# --- 介面開始 ---
 with gr.Blocks(title="Admin", css=custom_css) as demo:
     
     # 1. 登入介面
@@ -198,8 +206,10 @@ with gr.Blocks(title="Admin", css=custom_css) as demo:
     with gr.Group(visible=False) as admin_row:
         gr.Markdown("# 🍷 訂位管理後台 (Dashboard)")
         refresh_btn = gr.Button("🔄 重新整理")
-        # 表格這裡會自動套用上面的 CSS
-        booking_table = gr.Dataframe(interactive=False)
+        
+        # ✅ elem_id 保持為 booking_table，這是 CSS 抓取的關鍵
+        booking_table = gr.Dataframe(interactive=False, elem_id="booking_table")
+        
         with gr.Row():
             id_input = gr.Number(label="訂單 ID", precision=0)
             action_btn = gr.Button("📧 發送確認信 (Hybrid)", variant="primary")