Підсвітка рядків і колонок таблиці

9 червня 2022 р.200

Псевдоклас :hover працює не тільки для посилань, але й для інших елементів. Зокрема для таблиць зручно робити підсвічування рядків і колонок при наведенні на них курсору миші — це дозволяє легше зіставляти дані з різних колонок. оскільки таблиці формуються саме за рядками і для рядків є окремий елемент <tr>. До нього і додаємо :hover з бажаним кольором фону. У прикладі 1 показано створення підсвічування рядків таблиці.

Приклад 1. Підсвічування рядка таблиці

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:hover</title> <style> table { width: 100%; /* Ширина таблиці */
border-collapse: collapse; /* Прибираємо подвійні рамки */
} 
th, td { border: 1px solid #333; /* Параметри рамки */
padding: 4px; /* Поля в осередках */
} 
tr:hover { background: #d5e6a2; /* Колір тла */
}
</style>
</head>
<body> <table> <tr><th colspan="2">Черепашки-ніндзя</th></tr> <tr><th>Ім'я</th><th>Зброя</th></tr> <tr><td>Леонардо</td><td>Катани</td></tr> <tr><td>Рафаель</td><td>Кинджали-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Мікеланджело</td><td>Нунчаки</td></tr>
</table>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Підсвічування рядка таблиці

Мал. 1. Підсвічування рядка таблиці

Зверніть увагу, що колір фону змінюється у кожного рядка, включаючи заголовок таблиці. Щоб підсвічувати лише бажані рядки, ми можемо модифікувати таблицю, додавши до неї елементи <thead> та <tbody>.

<table> <thead> <tr><th colspan="2">Черепашки-ніндзя</th></tr> <tr><th>Ім'я</th><th>Зброя</th></tr>
</thead> <tbody> <tr><td>Леонардо</td><td>Катани</td></tr> <tr><td>Рафаель</td><td>Кинджали-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Мікеланджело</td><td>Нунчаки</td></tr>
</tbody>
</table>

У стилях змінимо селектор на tbody tr:hover, це гарантує, що підсвічування рядків буде відбуватися тільки всередині елемента <tbody>.

Підсвічування колонок таблиці

Реалізувати підсвічування колонок складніше, у нас немає елементів, які відповідають саме за колонки. Тож підемо на хитрість та імітуємо колонки за допомогою псевдоелемента ::before. До самих псевдоелементів не можна додавати :hover; як таких елементів, створених за допомогою ::after та ::before, не існує, хоча вони можуть бути і помітні в браузері . Так що чинимо навпаки і додаємо ::before до :hover.

td:hover::before { … }

Висоту таблиці ми не знаємо, тому створимо псевдоколонку заввишки 2000 пікселів, для більшості таблиць цього має вистачити. Якщо ви використовуєте високу таблицю, просто збільште значення властивості height. Значення width поставимо 100%, щоб псевдоколонка займала всю ширину комірки.

td:hover::before { content : ''; background: #d5e6a2; /* Колір тла */
height: 2000px; width: 100%; }

Позиціювання нашої псевдоколонки здійснюється за допомогою комбінацій значень position, докладніше про це читайте тут. Для осередку <td> встановлюємо відносне позиціонування, а для ::before — абсолютне. Положення від лівого краю комірки задаємо нульовим, щоб псевдоколонка розташовувалась по лівому краю комірки, а висоту ставимо як половину від значення height зі знаком мінус. У цьому випадку псевдоколонка йтиме одночасно вгору і вниз від обраного осередку. Заодно додаємо властивість z-index зі значенням-1, щоб псевдоколонка розташовувалася нижче за текст осередку і не перекривала його.

td { position: relative; } 
td:hover::before { position: absolute; left: 0; top:-1000px; z-index:-1; }

Псевдоколонка у нас досить висока і виходитиме за межі таблиці, тому її треба залишити тільки всередині таблиці за допомогою властивості overflow зі значенням hidden.

table { overflow: hidden; /* Приховуємо все поза таблицею */
}

Остаточний код наведено у прикладі 2.

Приклад 2. Підсвічування колонок таблиці

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:hover</title> <style> table { width: 100%; /* Ширина таблиці */
border-collapse: collapse; /* Забираємо подвійні рамки */
overflow: hidden; /* Приховуємо все поза таблицею */
} 
th, td { border: 1px solid #333; /* Параметри рамки */
padding: 4px; /* Поля в осередках */
} 
td {position: relative; /* Відносне позиціонування */
} 
td:hover::before { content: ''; /* Додаємо псевдоколонку */
background: #d5e6a2; /* Колір тла */
position: absolute; /* Абсолютне позиціонування */
height: 2000px; /* Висота колонки */
width: 100%; /* Ширина колонки */
left: 0; /* Положення від лівого краю */
top:-1000px; /* Положення від верхнього краю */
z-index:-1; /* Маємо нижче тексту осередку */
}
</style>
</head>
<body> <table> <thead> <tr><th colspan="2">Черепашки-ніндзя</th></tr> <tr><th>Ім'я</th><th>Зброя</th></tr>
</thead> <tbody> <tr><td>Леонардо</td><td>Катани</td></tr> <tr><td>Рафаель</td><td>Кинджали-сай</td></tr> <tr><td>Донателло</td><td>Шест-бо</td></tr> <tr><td>Мікеланджело</td><td>Нунчаки</td></tr>
</tbody>
</table>
</body>
</html>

Результат цього прикладу показаний на рис. 2.

Підсвічування колонок таблиці

Мал. 2. Підсвічування колонок таблиці

Знову ж таки, підсвічування діє на всі осередки колонки, включаючи осередки заголовка. Щоб підсвічування працювало тільки для осередків <td> треба явно задати білий колір фону у осередків <th>.

th { background: white; }

Підсвічування колонок таблиці

Див. також