Update app.py

app.py

@@ -132,57 +132,58 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [修復雙重捲軸 CSS]：隱藏外層，只留內層 ---
+# --- 🔥 [絕對強制 CSS]：死都不換行 + 強制撐開 + 單一捲軸 ---
 custom_css = """
-/* 1. 隱藏外層容器的捲軸 (殺掉綠色框框的捲軸) */
+/* 1. 隱藏外層多餘捲軸 */
 #booking_table {
-    overflow: hidden !important; 
-    border: none !important;
     background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
 }
 
-/* 2. 確保表格內部的容器負責捲動 (保留紅色框框的捲軸) */
+/* 2. 核心捲動容器：強制顯示水平捲軸 */
 #booking_table .table-wrap, 
 #booking_table div[class*="table"], 
-#booking_table .tbody-wrap {
+div[data-testid="dataframe"] > div {
     overflow-x: auto !important;
     overflow-y: hidden !important;
     display: block !important;
 }
 
-/* 3. 表格佈局 (維持原設定) */
+/* 3. 表格設定：max-content 是關鍵，它會強迫表格寬度 = 內容總寬度 */
 table { 
     display: table !important;
     table-layout: fixed !important; 
-    width: auto !important; 
+    width: max-content !important;  /* 👈 這是關鍵：強制撐開，不要擠在螢幕裡 */
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
-/* 4. 欄位設定 (維持您滿意的定寬) */
+/* 4. 欄位設定：NO WRAPPING (不換行) */
 th, td { 
     display: table-cell !important;
-    white-space: normal !important;
-    word-break: break-word !important;
-    vertical-align: top !important;
+    white-space: nowrap !important; /* 👈 絕對禁止換行 */
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    
     box-sizing: border-box !important;
     padding: 8px 10px !important;
     border: 1px solid #444 !important;
     font-size: 14px !important;
-    line-height: 1.4 !important;
+    vertical-align: middle !important;
 }
 
-/* 5. 個別欄位寬度 (維持您滿意的寬度) */
-th:nth-child(1), td:nth-child(1) { min-width: 50px !important; width: 50px !important; }
-th:nth-child(2), td:nth-child(2) { min-width: 110px !important; width: 110px !important; }
-th:nth-child(3), td:nth-child(3) { min-width: 70px !important; width: 70px !important; }
-th:nth-child(4), td:nth-child(4) { min-width: 90px !important; width: 90px !important; }
-th:nth-child(5), td:nth-child(5) { min-width: 110px !important; width: 110px !important; }
-th:nth-child(6), td:nth-child(6) { min-width: 200px !important; width: 200px !important; }
-th:nth-child(7), td:nth-child(7) { min-width: 50px !important; width: 50px !important; }
-th:nth-child(8), td:nth-child(8) { min-width: 180px !important; width: 180px !important; }
-th:nth-child(9), td:nth-child(9) { min-width: 90px !important; width: 90px !important; }
-th:nth-child(10), td:nth-child(10) { min-width: 180px !important; width: 180px !important; }
+/* 5. 指定欄位寬度 (依照您的需求) */
+th:nth-child(1), td:nth-child(1) { width: 60px !important; }  /* ID */
+th:nth-child(2), td:nth-child(2) { width: 170px !important; } /* Date */
+th:nth-child(3), td:nth-child(3) { width: 80px !important; }  /* Time */
+th:nth-child(4), td:nth-child(4) { width: 120px !important; } /* Name */
+th:nth-child(5), td:nth-child(5) { width: 120px !important; } /* Tel */
+th:nth-child(6), td:nth-child(6) { width: 250px !important; } /* Email (長) */
+th:nth-child(7), td:nth-child(7) { width: 50px !important; }  /* Pax */
+th:nth-child(8), td:nth-child(8) { width: 180px !important; } /* Remarks */
+th:nth-child(9), td:nth-child(9) { width: 12px !important; }  /* Status */
+th:nth-child(10), td:nth-child(10) { width: 280px !important; } /* UserID */
 """
 
 # --- 介面開始 (加入 css 參數) ---
@@ -202,7 +203,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 以便 CSS 抓取
         booking_table = gr.Dataframe(interactive=False, elem_id="booking_table")
         
         with gr.Row():