Проста підсвічування рядків і стовпців на чистому CSS

17

Від автора: Підсвічування рядків таблиці в CSS є до жаху простим завданням. Все, що вам потрібно, – це написати tr:hover { background: yellow; }. Але підсвічування стовпців завжди була трохи складніше, тому що у нас немає в розпорядженні такого HTML-елемента, який би був батьком для комірок таблиці щодо стовпця. Трохи JavaScript може легко це виправити, але Ендрю Хоу (Andrew Howe) нещодавно надіслав мені листа, в якому попросив поділитися невеликим трюком, який він виявив на сайті StackOverflow.

Даний трюк був опублікований Меттом Уолтоном (Matt Walton) кілька років тому, тому я вирішив трохи підчистити код і розмістити його тут.

Цей трюк в основному побудований на використанні псевдо-елементів для тега td, які приховані властивість overflow у елемента table. Коли ви пишете CSS, то вам невідомо, наскільки великою може бути таблиця насправді, тому створіть псевдо-елементи супер-високими, вказавши негативне значення для властивості top, дорівнює половині висоти самого псевдо-елемента.

table {
overflow: hidden;
}
tr:hover {
background-color: #ffa;
}
td:hover::after,
th:hover::after {
content: «»;
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}

Від’ємне значення властивості z-index буде тримати псевдо-елементи нижче контенту. Негативний z-index є забавним трюком, але пам’ятайте, що ця таблиця не може бути вкладена в інші елементи, яких заданий непрозорий фон. В іншому випадку підсвічування буде відображатися нижче цих елементів. Ви можете подивитися на це в дії:

Додаємо реалізацію для тач-пристроїв

Наведення на псевдо-класи лише частково працює на тач-пристроях. Для початку елемент повинен переходити в стан фокуса, а за замовчанням комірки таблиці цього не роблять. Звичайно, ви можете додати оброблювач події кліка по комірках таблиці і зробити все необхідне за допомогою JavaScript. Але в наступному методі більша частина роботи зроблена у CSS:

// Будь-тест для мобільних пристроїв, який самі захочете.
if (screen.width < 500) {
// Псевдо-клас :hover спрацює також,
// коли комірки перейдуть в стан фокуса.
// Ви можете використовувати цей клас для розділення
$(«body»).addClass(«nohover»);
// Активує для всіх клітинок стан фокусу
$(«td, th»)
.attr(«tabindex», «1»)
// Коли на них натискають, перемикаємо їх у стан фокусу
.on(«touchstart», function() {
$(this).focus();
});
}

Потім в CSS ви також додаєте стилі псевдо-класу :focus.

td:focus::after,
th:focus::after {
content: «;
background-color: lightblue;
position: absolute;
left: 0;
height: 10000px;
top: -5000px;
width: 100%;
z-index: -1;
}
td:focus::before {
background-color: lightblue;
content: «;
height: 100%;
top: 0;
left: -5000px;
position: absolute;
width: 10000px;
z-index: -1;
}

В кінцевому демо-прикладі я пішов ще далі з CSS селекторами, зробивши так, щоб для порожніх клітинок таблиці нічого не відбувалося, тобто заголовки таблиці всередині thead тільки для обраних стовпців, а заголовки таблиці всередині tbody тільки для вибраних рядків. Ви можете побачити це в дії в кінцевому демо-прикладі. А ось демонстрація роботи на тач-пристроях:

Проста підсвічування рядків і стовпців на чистому CSS