Beispiel:Tabelle-14.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style>
table { border-collapse: collapse; table-layout: fixed; font: 1.2em sans-serif; }
col {
width: calc(1/7 * 100%);
} .weekend { background-color: #fdd; } thead th {
font-size: 0.75em; font-weight: normal;
}
th, td { padding: 0.25em; text-align: center; }
tbody tr:hover {
background: hsl(220deg 100% 80% / 0.3);
}
table:has(td:nth-child(1):hover) col:nth-child(1), 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), table:has(td:nth-child(7):hover) col:nth-child(7) { background: hsl(20deg 100% 80% / 0.5); }
</style> <title>Tabellen mit CSS gestalten 6a</title>
</head>
<body>
Hervorheben von Tabellenspalten bei :hover
Übernommen aus einem Codepen von Gunnar Bittersmann.
| Montag | Dienstag | Mittwoch | Donnerstag | Freitag | Sonnabend | Sonntag |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 |
</body> </html>
