From ca10164aa5f3fecd35fb0bc3f19fe8d09dc40fef Mon Sep 17 00:00:00 2001
From: EOussama <oussama_gtacj@live.fr>
Date: Fri, 12 Jan 2024 23:01:16 +0100
Subject: [PATCH] Fixed table scroll on mobile screen

---
 src/index.html       | 68 +++++++++++++++++++++++---------------------
 src/styles/table.css | 11 +++++--
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/index.html b/src/index.html
index d32515d..9e3bd05 100644
--- 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
index 4fc1f63..efe0044 100644
--- 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;
 }