Skip to content

Commit

Permalink
Fix table formatting in CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShubhamShekhawat
ShubhamShekhawat committed Dec 18, 2024
1 parent fcbf081 commit b9d26a6
Showing 1 changed file with 107 additions and 80 deletions.
187 changes: 107 additions & 80 deletions css/hsf.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,12 @@
* Override Bootstrap's default container.
*/

@media (min-width: 1200px) {
@media (min-width: 1200px) {
.container {
width: 970px;
}
}


/*
* Centered image
*/
Expand All @@ -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 */
Expand Down Expand Up @@ -67,7 +65,6 @@
border-left: 5px solid transparent;
}


/*
* Blog name and description
*/
Expand All @@ -87,7 +84,6 @@
color: #999;
}


/*
* Main column and sidebar layout
*/
Expand All @@ -113,7 +109,6 @@
margin-bottom: 0;
}


/* Pagination */
.pager {
margin-bottom: 60px;
Expand All @@ -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;
Expand All @@ -144,7 +138,6 @@
color: #999;
}


/*
* Footer
*/
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -280,9 +342,6 @@ body {
}

/* TRAINING GROUP */

/* LIST OF MODULES */

.training-module {
width: 100%;
min-height: 100pt;
Expand All @@ -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);
}
Expand All @@ -309,7 +369,6 @@ body {
font-size: 17px;
}


.training-module-status {
padding-top: 10pt;
text-align: center;
Expand All @@ -330,7 +389,6 @@ body {
align-self: end;
}


.training-module-videos {
text-align: center;
display: block;
Expand All @@ -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

0 comments on commit b9d26a6

Please sign in to comment.