Update app.py

app.py

@@ -35,22 +35,20 @@ def main():
         start_index = st.session_state.get('start_index', 0)
         end_index = start_index + 6
 
-        # Define CSS styles for table cells
-        timestamp_style = "padding: 8px; background-color: rgb(255, 0, 0); color: rgb(118, 133, 123); display: flex; align-items: center;"
-        original_style = "padding: 8px; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); display: flex; align-items: center;"
-
-        # Display caption table
+        # Display caption table with CSS class names
         st.write("## Caption Table")
         st.write(
-            "<style> table { width: 100%; table-layout: fixed; } th, td { border: 1px solid black; word-wrap: break-word; } </style>",
+            "<link rel='stylesheet' href='styles.css'>", unsafe_allow_html=True
+        )
+        st.write(
+            "<table><tr><th class='timestamp'>Timestamp</th><th class='original'>Original</th></tr>",
             unsafe_allow_html=True,
         )
-        st.write("<table><tr><th style='width: 50%;'>Timestamp</th><th style='width: 50%;'>Original</th></tr>", unsafe_allow_html=True)
         
         for i in range(start_index, min(end_index, len(captions_list))):
             st.write(
-                f"<tr><td style='{timestamp_style}'>{captions_list[i]['Timestamp']}</td>"
-                f"<td style='{original_style}'>{captions_list[i]['Original']}</td></tr>",
+                f"<tr><td class='timestamp'>{captions_list[i]['Timestamp']}</td>"
+                f"<td class='original'>{captions_list[i]['Original']}</td></tr>",
                 unsafe_allow_html=True,
             )