Update app.py

app.py

@@ -133,43 +133,42 @@ def check_login(user, password):
             error_msg: "<span style='color: red'>❌ 帳號或密碼錯誤</span>"
         }
 
-# --- 🔥 [最終修正 CSS]：不換行 + 自動撐開 + 捲軸 ---
+# --- 🔥 [回歸傳統 CSS]：不換行 + 強制捲動 ---
 custom_css = """
-/* 1. 確保外層容器可以捲動 */
-div[data-testid="dataframe"] {
+/* 1. 外層容器：強制開啟水平捲軸 */
+.table-wrap, .svelte-12cmxck, .wrap {
     overflow-x: auto !important;
-    max-width: 100vw !important; /* 確保容器本身不超過螢幕寬 */
     display: block !important;
 }
 
 /* 2. 表格本體：
-   min-width: max-content 是關鍵！
-   它告訴瀏覽器：表格的最小寬度 = 內容完全展開後的總長度。
-   這會迫使外層容器產生捲軸，而不是壓縮表格。
+   width: auto -> 內容多少寬度就多少
+   table-layout: auto -> 自動依內容計算
 */
 table { 
-    min-width: max-content !important; 
+    table-layout: auto !important; 
     width: auto !important;
     border-collapse: collapse !important;
 }
 
-/* 3. 欄位設定：強制不換行 */
+/* 3. 欄位設定：
+   white-space: nowrap -> 死都不准換行 (這會把表格撐寬)
+   max-width: none -> 移除任何寬度限制
+*/
 td, th { 
-    white-space: nowrap !important;  /* 🚫 絕對禁止換行 */
-    overflow: visible !important;
-    text-overflow: clip !important;  /* 移除 ... */
-    
-    /* 移除寬度限制，讓內容自己決定要多寬 */
+    white-space: nowrap !important;
+    min-width: 10px !important; /* 防止縮太小 */
     max-width: none !important;
     width: auto !important;
     
-    padding: 8px 12px !important;    /* 舒適間距 */
+    padding: 8px 12px !important;
+    border: 1px solid #444 !important; /* 加上邊框比較清楚 */
 }
 
-/* 4. 針對 Gradio 內部的 span 也強制不換行 */
+/* 4. Gradio 內部的 span */
 td > span, th > span {
     white-space: nowrap !important;
-    overflow: visible !important;
+    display: inline-block !important;
 }
 """