Update app.py

app.py

@@ -133,38 +133,35 @@ def check_login(user, password):
 
 # --- 🔥 [最終修正 CSS] 🔥 ---
 custom_css = """
-/* 1. 殺掉外層捲軸：強制隱藏外層容器的 overflow */
+/* 1. 殺掉外層捲軸 (綠色框框問題) */
 #booking_table .wrap {
-    overflow: hidden !important; 
+    overflow: hidden !important;
 }
 
-/* 2. 保留內層捲軸：只允許包覆表格的容器捲動 */
+/* 2. 保留內層捲軸 (紅色框框)，這是唯一可以捲動的地方 */
 #booking_table .table-wrap {
     overflow-x: auto !important;
     overflow-y: hidden !important;
     border: 1px solid #444 !important;
 }
 
-/* 3. 表格本體：
-   width: max-content -> 強制撐開，不讓瀏覽器壓縮
-   table-layout: fixed -> 嚴格遵守下方設定的寬度
+/* 3. 表格本體設定 
+   min-width: 1500px -> 確保表格夠寬，強迫出現捲軸
+   table-layout: fixed -> 強制瀏覽器聽從下方的欄位寬度設定
 */
 #booking_table table {
     table-layout: fixed !important;
-    width: max-content !important; 
+    min-width: 1500px !important; 
     border-collapse: collapse !important;
     margin: 0 !important;
 }
 
-/* 4. 欄位通用設定：
-   white-space: normal -> 【關鍵】允許換行！
-   word-break: break-word -> 確保長單字也能換行
-*/
+/* 4. 通用儲存格設定 */
 #booking_table th, #booking_table td {
     display: table-cell !important;
-    white-space: normal !important; 
-    overflow-wrap: break-word !important;
-    word-break: break-word !important;
+    white-space: normal !important; /* ✅ 允許換行 */
+    overflow-wrap: break-word !important; /* ✅ 長單字換行 */
+    word-break: break-all !important;
     
     vertical-align: top !important;
     box-sizing: border-box !important;
@@ -174,36 +171,38 @@ custom_css = """
     line-height: 1.4 !important;
 }
 
-/* 5. 🔥【完全依照您的指示固定寬度】🔥 */
+/* 5. 🔥【依照您的要求，固定每個欄位寬度】🔥 */
+/* 注意：這裡同時設定 width 和 min-width 確保瀏覽器不會壓縮它 
+*/
 
-/* #1 id */
+/* #1 id: 60px */
 #booking_table th:nth-child(1), #booking_table td:nth-child(1) { width: 60px !important; min-width: 60px !important; }
 
-/* #2 date */
+/* #2 date: 170px */
 #booking_table th:nth-child(2), #booking_table td:nth-child(2) { width: 170px !important; min-width: 170px !important; }
 
-/* #3 time */
+/* #3 time: 80px */
 #booking_table th:nth-child(3), #booking_table td:nth-child(3) { width: 80px !important; min-width: 80px !important; }
 
-/* #4 name */
+/* #4 name: 120px */
 #booking_table th:nth-child(4), #booking_table td:nth-child(4) { width: 120px !important; min-width: 120px !important; }
 
-/* #5 tel */
+/* #5 tel: 120px */
 #booking_table th:nth-child(5), #booking_table td:nth-child(5) { width: 120px !important; min-width: 120px !important; }
 
-/* #6 email */
+/* #6 email: 250px */
 #booking_table th:nth-child(6), #booking_table td:nth-child(6) { width: 250px !important; min-width: 250px !important; }
 
-/* #7 pax */
+/* #7 pax: 50px */
 #booking_table th:nth-child(7), #booking_table td:nth-child(7) { width: 50px !important; min-width: 50px !important; }
 
-/* #8 remarks */
+/* #8 remarks: 180px */
 #booking_table th:nth-child(8), #booking_table td:nth-child(8) { width: 180px !important; min-width: 180px !important; }
 
-/* #9 status */
+/* #9 status: 120px */
 #booking_table th:nth-child(9), #booking_table td:nth-child(9) { width: 120px !important; min-width: 120px !important; }
 
-/* #10 user_id */
+/* #10 user_id: 320px */
 #booking_table th:nth-child(10), #booking_table td:nth-child(10) { width: 320px !important; min-width: 320px !important; }
 """