От автора: Подсветка строк таблицы в CSS является до ужаса простой задачей. Все, что вам нужно, – это написать tr:hover { background: yellow; }. Но подсветка столбцов всегда была немного сложнее, т.к. у нас нет в распоряжении такого HTML элемента, который был бы родителем для ячеек таблицы относительно столбца. Немного JavaScript может легко это исправить, но Эндрю Хоу (Andrew Howe) недавно прислал мне письмо, в котором попросил поделиться небольшим трюком, который он обнаружил на сайте StackOverflow.
Данный трюк был опубликован Мэттом Уолтоном (Matt Walton) несколько лет назад, поэтому я решил немного подчистить код и разместить его здесь.
Этот трюк в основном построен на использовании псевдо-элементов для тега td, которые скрыты свойством overflow у элемента table. Когда вы пишете CSS, то вам неизвестно, насколько большой может быть таблица на самом деле, поэтому создайте псевдо-элементы супер-высокими, указав отрицательное значение для свойства top, равное половине высоты самого псевдо-элемента.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Любой тест для мобильных устройств, какой сами захотите. if (screen.width < 500) { // Псевдо-класс :hover сработает также, // когда ячейки переключатся в состояние фокуса. // Вы можете использовать этот класс для разделения $("body").addClass("nohover"); // Активирует для всех ячеек состояние фокуса $("td, th") .attr("tabindex", "1") // Когда на них нажимают, переключаем их в состояние фокуса .on("touchstart", function() { $(this).focus(); }); } |
Затем в CSS вы также добавляете стили для псевдо-класса :focus.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 только для выбранных строк. Вы можете увидеть это в действии в конечном демо-примере. А вот демонстрация работы на тач-устройствах:
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)