add responsive.

utils.py

@@ -23,7 +23,7 @@ def df_to_html(df):
         {'selector': 'td, th', 'props': [('border', 'none'), ("text-align", "center"), ('font-size', 'smaller')]},  # Remove cell borders, reduce font size
         {'selector': 'tr:hover', 'props': [('background-color', '#878787')]},
         {'selector': 'a:hover', 'props': [('color', 'darkblue')]},
-        {'selector': 'table', 'props': [('border-collapse', 'collapse'), ('border', 'none'), ('border-bottom', '1px solid black'), ('width', '50%')]},  # Set table width to 50%
+        {'selector': '.responsive-table', 'props': [('width', '100%')]},  # Set table width to 100%
         {'selector': 'thead', 'props': [('border', 'none')]},  # Hide header border
         {'selector': 'tbody td', 'props': [('border-left', 'none'), ('border-right', 'none')]}, 
         {'selector': 'tr:not(:first-child) td', 'props': [('border-left', 'none'), ('border-right', 'none'), ('border-top', 'none')]},
@@ -31,13 +31,14 @@ def df_to_html(df):
     ]
 
     # Apply table styles and convert DataFrame to HTML
-    styled_html = df.style.hide(axis="index").set_table_styles(styles).to_html(escape=False, index=False, bold_rows=True, justify='center').replace('<td>', '<td align="center">')
+    styled_html = '<div style="max-width: 100%; overflow-x: auto;">' + df.style.hide(axis="index").set_table_styles(styles).to_html(escape=False, index=False, bold_rows=True, justify='center').replace('<td>', '<td align="center" class="responsive-table">') + '</div>'
         
     return styled_html
 
 
 
 
+
 @st.cache_data
 def render_svg(svg):
     """Renders the given svg string."""