Update app.py

app.py

@@ -131,14 +131,14 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [絕對定寬 + 自動換行 CSS] ---
+# --- 🔥 [最終修正 CSS] 🔥 ---
 custom_css = """
-/* 1. 隱藏最外層的捲軸，只留內部一個 */
+/* 1. 殺掉外層捲軸：強制隱藏外層容器的 overflow */
 #booking_table .wrap {
     overflow: hidden !important; 
 }
 
-/* 2. 表格容器：強制開啟 X 軸捲軸 */
+/* 2. 保留內層捲軸：只允許包覆表格的容器捲動 */
 #booking_table .table-wrap {
     overflow-x: auto !important;
     overflow-y: hidden !important;
@@ -146,20 +146,19 @@ custom_css = """
 }
 
 /* 3. 表格本體：
-   min-width: 1600px -> 【關鍵】直接把表格撐到 1600px 寬。
-   這樣在手機上（寬度~400px）一定會超出，進而觸發捲軸。
-   table-layout: fixed -> 嚴格遵守下方設定的欄位寬度。
+   width: max-content -> 強制撐開，不讓瀏覽器壓縮
+   table-layout: fixed -> 嚴格遵守下方設定的寬度
 */
 #booking_table table {
     table-layout: fixed !important;
-    min-width: 1600px !important; 
+    width: max-content !important; 
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
 /* 4. 欄位通用設定：
-   white-space: normal -> 【關鍵】允許換行，太長就變兩行。
-   overflow-wrap: break-word -> 確保長單字也能換行。
+   white-space: normal -> 【關鍵】允許換行！
+   word-break: break-word -> 確保長單字也能換行
 */
 #booking_table th, #booking_table td {
     display: table-cell !important;
@@ -175,39 +174,37 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 5. 🔥【依照您的要求，固定每個欄位寬度】🔥 
-   這些寬度加總起來大約是 1600px，會剛好撐滿上面的 min-width
-*/
+/* 5. 🔥【完全依照您的指示固定寬度】🔥 */
 
-/* #1 id: 短數字 */
-#booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; }
+/* #1 id */
+#booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; min-width: 60px !important; }
 
-/* #2 date: 日期 */
-#booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; }
+/* #2 date */
+#booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; min-width: 170px !important; }
 
-/* #3 time: 時間 */
-#booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; }
+/* #3 time */
+#booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; min-width: 80px !important; }
 
-/* #4 name: 姓名 */
-#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; }
+/* #4 name */
+#booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; min-width: 120px !important; }
 
-/* #5 tel: 電話 */
-#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; }
+/* #5 tel */
+#booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; min-width: 120px !important; }
 
-/* #6 email: 電子信箱 (給寬一點) */
-#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; }
+/* #6 email */
+#booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; min-width: 250px !important; }
 
-/* #7 pax: 人數 */
-#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; }
+/* #7 pax */
+#booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; min-width: 50px !important; }
 
-/* #8 remarks: 備註 */
-#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; }
+/* #8 remarks */
+#booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; min-width: 180px !important; }
 
-/* #9 status: 狀態 */
-#booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; }
+/* #9 status */
+#booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; min-width: 120px !important; }
 
-/* #10 user_id: 亂碼 (非常長) */
-#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; }
+/* #10 user_id */
+#booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; min-width: 320px !important; }
 """
 
 # --- 介面開始 ---