Простая подсветка строк и столбцов на чистом CSS

Простая подсветка строк и столбцов на чистом CSS

От автора: Подсветка строк таблицы в 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 только для выбранных строк. Вы можете увидеть это в действии в конечном демо-примере. А вот демонстрация работы на тач-устройствах:

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. ok

    «… что данная таблица не может быть вложена в другие элементы, которым задан непрозрачный фон. В противном случае подсветка будет отображаться ниже этих элементов»
    ну отчего же нет? вполне себе даже да

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree