Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/index.html

Created November 3, 2025 21:39
Show Gist options
  • Save prof3ssorSt3v3/871c21562846fa50aa9f0416efc6a3d5 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/871c21562846fa50aa9f0416efc6a3d5 to your computer and use it in GitHub Desktop.
Download ZIP
Hover over a table cell and highlight the column and row
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tables</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />
<script type="module" src="js/main.js"></script>
</head>
<body>
<header>
<h1>Tables</h1>
</header>
<main>
<table>
<caption>
My Weekly Schedule
</caption>
<colgroup>
<col />
<col class="weekday" />
<col class="weekday" />
<col class="weekday" />
<col class="weekday" />
<col class="weekday" />
<col span="2" class="weekend" />
</colgroup>
<!-- <thead> -->
<tr>
<th>&nbsp;</th>
<th>Monday</th>
<!-- colspan="2" -->
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<!-- </thead> -->
<tr>
<th>Week of Nov 3</th>
<td>Judo</td>
<td>Horseback riding</td>
<td>Glider pilot lessons</td>
<td>Macrame</td>
<td>Cross-stitching</td>
<td>Water Polo</td>
<td>Juijitsu</td>
</tr>
<tr>
<th>Week of Nov 10</th>
<td>Juijitsu</td>
<td>Judo</td>
<td>Macrame</td>
<td>Cross-stitching</td>
<td>Horseback riding</td>
<td>Glider pilot lessons</td>
<td>Water Polo</td>
</tr>
<tr>
<th>Week of Nov 17</th>
<td>Horseback riding</td>
<td>Macrame</td>
<td>Cross-stitching</td>
<td>Glider pilot lessons</td>
<td>Water Polo</td>
<td>Judo</td>
<td>Juijitsu</td>
</tr>
<tr>
<th>Week of Nov 24</th>
<td>Macrame</td>
<td>Cross-stitching</td>
<td>Juijitsu</td>
<td>Judo</td>
<td>Horseback riding</td>
<td>Water Polo</td>
<td>Glider pilot lessons</td>
</tr>
</table>
</main>
<dialog>
<h2>Delete that thang</h2>
<p>Are you sure?</p>
<button id="btnYes">Yes</button>
<button id="btnNo">No</button>
</dialog>
</body>
</html>
Raw
main.css
body {
font-family: 'Noro Sans', sans-serif;
}
table {
font-family: 'Noro Serif', serif;
border: 1px solid #444;
margin: 2rem;
border-collapse: collapse; /* get rid of the cellspacing between cells */
font-size: 1.5rem;
}
caption {
caption-side: bottom;
margin-block-start: 1rem;
font-weight: 700;
}
th {
border: 1px solid #444;
padding: 0.5rem;
background-color: #444;
color: white;
font-weight: 400;
}
th:nth-of-type(1) {
text-align: end;
}
td {
border: 1px solid #444;
padding: 0.5rem;
color: #444;
font-weight: 400;
min-width: 12ch;
}
td:hover {
background-color: rgb(231, 239, 75);
}
tr:nth-of-type(even) {
/* background-color: bisque; */
}
tr:has(td:hover) {
/* th inside a row if the user is hovering on a td */
background-color: rgb(231, 239, 75);
> th:first-child {
color: rgb(231, 239, 75);
}
}
table:has(td:nth-child(2):hover) col:nth-child(2),
table:has(td:nth-child(3):hover) col:nth-child(3),
table:has(td:nth-child(4):hover) col:nth-child(4),
table:has(td:nth-child(5):hover) col:nth-child(5),
table:has(td:nth-child(6):hover) col:nth-child(6) {
background-color: rgb(231, 239, 75);
/* weekday column background when hovering over one cell in the column */
}
table:has(td:nth-child(2):hover) th:nth-child(2),
table:has(td:nth-child(3):hover) th:nth-child(3),
table:has(td:nth-child(4):hover) th:nth-child(4),
table:has(td:nth-child(5):hover) th:nth-child(5),
table:has(td:nth-child(6):hover) th:nth-child(6) {
color: rgb(231, 239, 75);
/* color of the heading in a column when hovering over one cell
note the different number for the th because our first one has colspan="2" */
}
::backdrop {
background-color: hsla(300, 50%, 50%, 0.64);
}
.weekday {
/* style the background of the weekday columns */
}
.weekend {
/* background-color: bisque; style the weekend columns */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment