table4

app.py

@@ -331,7 +331,32 @@ This leaderboard is used to show the performance of the <strong>automatic evalua
 
     with tab4:
         st.markdown("""<p class='main-text'>Task: Non-Factoid QA; Dataset: NF_CATS</p>""", unsafe_allow_html=True)
-        st.dataframe(df4, use_container_width=True)
+        # 将 DataFrame 转换为 HTML 表格
+        html_table = df4.to_html(index=False)
+
+        # 定义样式并使用 DataTables 使表格具有排序、搜索、放大等功能
+        styled_table = f"""
+        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
+        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
+        <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
+        <script>
+        $(document).ready(function() {{
+            $('#dataframe').DataTable();
+        }});
+        </script>
+        <style>
+        table {{
+            font-size: 16px;
+            width: 100%;
+        }}
+        </style>
+        <table id="dataframe" class="display">
+            {html_table[html_table.find('<thead>') : ]}
+        </table>
+        """
+
+        # 在 Streamlit 中显示 HTML 表格
+        st.write(styled_table, unsafe_allow_html=True)
 elif page == "Organisers":
     st.header("Organisers")
     st.markdown("""