Beispiel:Tabelle-15.html
<!DOCTYPE html> <html> <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" /> <title>Highlight hovered table column</title> <style>
table { border-collapse: collapse; table-layout: fixed; }
col { width: calc(1/7 * 100%); }
tbody tr:hover { background: hsl(220deg 100% 80% / 0.3); }
.hover { background: hsl(20deg 100% 80% / 0.5); }
thead th { font-size: 0.75em; font-weight: normal; }
th, td{ text-align: center; padding: 0.25em; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tableElement = document.querySelector('table');
const colElements = tableElement.querySelectorAll('col');
function findColumnFor(element) { const cell = event.target.closest('td,th'); return cell ? colElements[cell.cellIndex] : null; }
tableElement.addEventListener('mouseover', event => { const col = findColumnFor(event.target); if (col) col.classList.add('hover'); }); tableElement.addEventListener('mouseout', (event) => { const col = findColumnFor(event.target); if (col) col.classList.remove('hover'); }); });
</script>
</head> <body>
Highlight hovered table column
| 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>
