Fix table formatting in CSS

Author: ShubhamShekhawat

css/hsf.css

@@ -8,13 +8,12 @@
  * Override Bootstrap's default container.
  */
 
-@media (min-width: 1200px) {
+ @media (min-width: 1200px) {
   .container {
     width: 970px;
   }
 }
 
-
 /*
  * Centered image
  */
@@ -24,15 +23,14 @@
   display: block;
 }
 
-
 /*
  * Masthead for nav
  */
 
 .blog-masthead {
   background-color: #428bca;
   -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
-          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
+  box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
 }
 
 /* Nav links */
@@ -67,7 +65,6 @@
   border-left: 5px solid transparent;
 }
 
-
 /*
  * Blog name and description
  */
@@ -87,7 +84,6 @@
   color: #999;
 }
 
-
 /*
  * Main column and sidebar layout
  */
@@ -113,7 +109,6 @@
   margin-bottom: 0;
 }
 
-
 /* Pagination */
 .pager {
   margin-bottom: 60px;
@@ -126,14 +121,13 @@
   border-radius: 30px;
 }
 
-
 /*
  * Blog posts
  */
 
 .blog-post {
   margin-bottom: 30px;
-  padding: 10px 20px; /* I don't understand why this is needed... */
+  padding: 10px 20px;
 }
 .blog-post-title {
   margin-bottom: 5px;
@@ -144,7 +138,6 @@
   color: #999;
 }
 
-
 /*
  * Footer
  */
@@ -153,17 +146,86 @@
   margin-bottom: 50px;
 }
 
+/* Table Styles */
+table {
+  width: 100%;
+  border-collapse: collapse; /* Ensures tables don't have gaps between cells */
+  margin-bottom: 30px; /* Space below the table */
+}
+
+th, td {
+  padding: 12px; /* Adds space around content */
+  text-align: left; /* Aligns text to the left */
+  border: 1px solid #ddd; /* Light border color */
+}
+
+th {
+  background-color: #f8f9fa; /* Light background for header */
+  font-weight: bold; /* Bold text for headers */
+}
+
+tr:nth-child(even) {
+  background-color: #f2f2f2; /* Alternating row colors */
+}
+
+tr:hover {
+  background-color: #e9ecef; /* Hover effect on rows */
+}
+
+/* Training Table Styles */
+.training table {
+  width: 100%;
+  border-collapse: collapse; /* Ensures there are no gaps between cells */
+}
+
+.training table tr {
+  background-color: white;
+  border: 1px solid #cccccc; /* Add borders around rows */
+}
+
+.training table tr:nth-child(2n) {
+  background-color: #f8f8f8; /* Alternate row color */
+}
+
+.training table th, .training table td {
+  padding: 8px 15px; /* Adjust padding for better spacing */
+  border: 1px solid #cccccc; /* Border for cells */
+  text-align: left; /* Align text to the left */
+}
+
+.training table th {
+  background-color: #f0f0f0; /* Light background for table headers */
+  font-weight: bold; /* Make header text bold */
+}
+
+.training table tr:hover {
+  background-color: #f2f2f2; /* Hover effect for rows */
+}
+
+.training table tr td:first-child,
+.training table tr th:first-child {
+  padding-left: 20px; /* Add extra padding on the left for the first column */
+}
+
+.training table tr td:last-child,
+.training table tr th:last-child {
+  padding-right: 20px; /* Add extra padding on the right for the last column */
+}
+
+/* Footer */
 .blog-footer {
   padding: 40px 0;
   color: #999;
   text-align: center;
   background-color: #f9f9f9;
   border-top: 1px solid #e5e5e5;
 }
+
 .blog-footer p:last-child {
   margin-bottom: 0;
 }
 
+/* Navbar */
 .navbar-nav {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -177,20 +239,20 @@
 }
 
 .navbar-brand {
- height: 40px;
- padding: 9.5px 15px;
- font-size: 15px;
+  height: 40px;
+  padding: 9.5px 15px;
+  font-size: 15px;
 }
 
 .navbar-default .navbar-nav > li > a:focus,
 .navbar-default .navbar-nav > li > a:hover,
-.navbar-default .navbar-brand:hover{
+.navbar-default .navbar-brand:hover {
   color: #f39c12;
 }
 
 .navbar-nav>li>a {
-		padding-top: 9.5px;
-		padding-bottom: 9.5px
+  padding-top: 9.5px;
+  padding-bottom: 9.5px;
 }
 
 a {
@@ -212,25 +274,25 @@ body {
 }
 
 .announcement {
-    background-color: #f39c12;
-    border-color: #f39c12;
-    color: #ffffff;
-    padding: 15px;
-    margin-bottom: 21px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    margin-left: -15px;
-    margin-right: -15px;
+  background-color: #f39c12;
+  border-color: #f39c12;
+  color: #ffffff;
+  padding: 15px;
+  margin-bottom: 21px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin-left: -15px;
+  margin-right: -15px;
 }
 
 .lead {
   font-size: 20px;
 }
+
 .event-announce > a:hover {
-	color: #333333;
+  color: #333333;
 }
 
-
 .alert {
   padding: 8px;
 }
@@ -241,22 +303,22 @@ body {
 
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
-    background-color: #555555;
+  background-color: #555555;
 }
 
 [role="button"] {
-    font-size: 17px;
+  font-size: 17px;
 }
 
 .alignleft {
   float: left;
 }
+
 .alignright {
   float: right;
 }
 
 /* COLORFUL BIG LINK */
-
 .big-link-container {
   width: 100%;
   display: grid;
@@ -280,9 +342,6 @@ body {
 }
 
 /* TRAINING GROUP */
-
-/* LIST OF MODULES */
-
 .training-module {
   width: 100%;
   min-height: 100pt;
@@ -298,6 +357,7 @@ body {
 .tm-alpha {
   background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, #f9f2f4 20px, #f9f2f4 40px);
 }
+
 .tm-beta {
   background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #f9f9f1 10px, #f9f9f1 40px);
 }
@@ -309,7 +369,6 @@ body {
   font-size: 17px;
 }
 
-
 .training-module-status {
   padding-top: 10pt;
   text-align: center;
@@ -330,7 +389,6 @@ body {
   align-self: end;
 }
 
-
 .training-module-videos {
   text-align: center;
   display: block;
@@ -344,59 +402,28 @@ body {
   gap: 10px;
 }
 
-.training table {
-    padding: 0;
-    width: 100%;
-  }
-.training table tr {
-    border: 1px solid #cccccc;
-    background-color: white;
-    margin: 0;
-    padding: 0;
-  }
-.training table tr:nth-child(2n) {
-  background-color: #f8f8f8;
-}
-.training table tr th {
-  font-weight: bold;
-  border: 1px solid #cccccc;
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-.training table tr td {
-  border: 1px solid #cccccc;
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-.training table tr th :first-child, .training table tr td :first-child {
-  margin-top: 0;
-}
-.training table tr th :last-child, .training table tr td :last-child {
-  margin-bottom: 0;
-}
-
 figure.centered-figure {
-    text-align: center
+  text-align: center;
 }
+
 .centered-figure > img {
-    width:80%;
-    max-width: 600px
+  width: 80%;
+  max-width: 600px;
 }
+
 .centered-figure > figcaption {
-    width:80%;
-    max-width: 600px;
-    text-align: center;
-    margin: 0 auto;
+  width: 80%;
+  max-width: 600px;
+  text-align: center;
+  margin: 0 auto;
 }
 
-/* Media Queries  */
+/* Media Queries */
 
 @media (max-width: 620px) {
   .big-link-container {
-     grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
   }
-  .big-link-container a {
-    min-height: 0;
-}
+
+  .big-link
+