优化表格样式

templates/base_index.html

@@ -21,9 +21,9 @@
     </div>
 </nav>
 
-<div class="container mt-5">
-    {% block content %}{% endblock %}
-</div>
+
+{% block content %}{% endblock %}
+
 <!-- Bootstrap JS and dependencies -->
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/popper.min.js"></script>

templates/simple_backtest.html

@@ -1,6 +1,25 @@
+<style>
+    @media (max-width: 768px) {
+        .table td, .table th {
+            padding: .5rem; /* 减小填充 */
+            font-size: .875rem; /* 减小字体大小 */
+        }
+    }
+
+    .table {
+        width: 100%;
+        max-width: 100%;
+        margin-bottom: 1rem;
+    }
+
+    .table th, .table td {
+        word-wrap: break-word; /* 允许单词内换行 */
+    }
+</style>
+
 {% extends "base_index.html" %}
 {% block content %}
-<div class="container mt-5">
+<div class="container-fluid mt-2">
     <h1 class="text-center mb-4">上传CSV文件</h1>
     <div class="row justify-content-center">
         <div class="col-md-6">
@@ -19,14 +38,19 @@
         </div>
     </div>
 
+    <!--  增大表格展示  -->
+
     {% if tables %}
-    <h2 class="text-center">{{ file_name }}分析结果</h2>
-    <div class="table-responsive">
+    <h3 class="text-center" style="margin-bottom: 3vh">{{ file_name }}分析结果</h3>
+    <div class="d-table mx-auto">
         {% for table in tables %}
-        {{ table|safe }}
+        <table class="table text-center">
+            {{ table|safe }}
+        </table>
         {% endfor %}
     </div>
     {% endif %}
+
 </div>
 
 <script>