Подсветить строку и колонку таблицы при помощи CSS

Подсветить строку таблицы при помощи CSS достаточно легко: tr:hover {background: yellow;} и задача выполнена. Подсветить колонку всегда было немного сложнее, так как нет простого HTML-элемента, который бы являлся родителем ячейки таблицы в столбце. Есть просто решение на javascript, но в этой заметке мы рассмотрим решение без использования javascript.

Трюк в использовании громадных псевдоэлементов для элемента td, при этом псевдоэлементы скрываются за пределами таблицы

Реализовывать подсветку будем при помощи псевдоэлементов, при этом у псевдоэлемента ширина должна быть равна ширине ячейки, а верхнее отрицательное поле должно быть равно половине значения от высоты (которая, в свою очередь, назначается с запасом, чтобы перекрыть любую по высоте таблицу) псевдоэлемента.

CSS

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 любопытный трюк, но будьте осторожны, когда таблица вложена в другие элементы с фоном, иначе подсветка пойдет под ними.

See the Pen Простая подсветка строки и колонки на CSS by dnzl (@dnzl) on CodePen.

Как заставить работать с сенсорными дисплеями

Псевдокласс :hover любопытно работает на touch-устройствах. Во-первых, элемент должен быть фокусируемым, что по умолчанию для ячеек таблиц не так. Вы, конечно, можете добавить обработчик события click на ячейку таблицы и реализовать все на JavaScript, но вот метод, позволяющий сохранить большую часть работы в CSS:

jQuery

// Для любых мобильных устройст по вашему желанию
if (screen.width < 500) {

  // :hover will trigger also once the cells are focusable
  // you can use this class to separate things
  $("body").addClass("nohover");

  // Делаем все ячейки фокус доступными
  $("td, th")
    .attr("tabindex", "1")
    // При нажатии ставим на них фокус
    .on("touchstart", function() {
      $(this).focus();
    });

}

Затем в CSS вам потребуется следующие стили:

CSS

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 выделяется лишь строка.

Здесь вы можете просмотреть полное демо.

источник