Fixed table scroll on mobile screen

gomu-gomu · Jan 12, 2024 · ca10164 · ca10164
1 parent 9fd6a74
commit ca10164
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 35 deletions.
diff --git a/src/index.html b/src/index.html
@@ -235,39 +235,41 @@ <h5 class="card-title">Countries and Provinces Ranked by Total Cases</h5>
             </div>
 
             <div class="card-body">
-              <table class="table table-striped">
-                <thead class="table-light">
-                  <tr>
-                    <th
-                      class="rank"
-                      scope="col"
-                    >#</th>
-
-                    <th
-                      class="country"
-                      scope="col"
-                    >Country</th>
-
-                    <th
-                      class="province"
-                      scope="col"
-                    >Province</th>
-
-                    <th
-                      class="cases"
-                      scope="col"
-                    >Total Cases</th>
-
-                    <th
-                      class="deaths"
-                      scope="col"
-                    >Total Deaths</th>
-                  </tr>
-                </thead>
-
-                <tbody id="table-body">
-                </tbody>
-              </table>
+              <div class="table-responsive">
+                <table class="table table-striped">
+                  <thead class="table-light">
+                    <tr>
+                      <th
+                        class="rank"
+                        scope="col"
+                      >#</th>
+
+                      <th
+                        class="country"
+                        scope="col"
+                      >Country</th>
+
+                      <th
+                        class="province"
+                        scope="col"
+                      >Province</th>
+
+                      <th
+                        class="cases"
+                        scope="col"
+                      >Total Cases</th>
+
+                      <th
+                        class="deaths"
+                        scope="col"
+                      >Total Deaths</th>
+                    </tr>
+                  </thead>
+
+                  <tbody id="table-body">
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/styles/table.css b/src/styles/table.css
@@ -1,13 +1,16 @@
+.table-responsive {
+  margin-top: -15px;
+}
+
 .table {
   margin-bottom: 0;
-  margin-top: -15px;
 
   overflow: hidden;
   border-radius: 10px;
 
   --bs-table-color: #53567e;
   --bs-table-striped-color: #53567e;
-  
+
   --bs-table-bg: #dfdfff;
   --bs-table-striped-bg: #e6e6ff;
 }
@@ -17,6 +20,10 @@
   --bs-table-color: #53567e;
 }
 
+.table thead th {
+  white-space: nowrap;
+}
+
 .table tbody td {
   text-transform: capitalize;
 }