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

Сегодня разберем крутой трюк для создания интерактивной подсветки строк и столбцов в HTML-таблицах без JS. Типа как в Excel)

На html создадим обычную таблицу.

Базовые стили:

.highlight-table {
  overflow: hidden;    /* Важно для обрезки псевдоэлементов */
}

Подсветка строки:

.highlight-table tbody tr:hover td,
.highlight-table tbody tr:hover th {
  background: #fffe96;
}

При hover на строку подсвечиваем все ее ячейки.

Подсветка столбца:

.highlight-table td:hover::after,
.highlight-table thead th:hover::after {
  content: "";
  position: absolute;
  z-index: -1; 
  top: -50vh;
  left: 0;
  width: 100%; 
  height: 100vh; 
  background: #fffe96;
}

vh позволяют создавать элементы размером с экран. В нашем случае 100vh дает полосу на всю высоту, а top: -50vh центрирует ее так, чтобы она покрывала всю таблицу.

Теперь когда мы наводим на ячейку, то подсвечивается и строка и столбец, выглядит круто)

Потестить можно здесь.

Новый синтаксис медиазапросов Media Queries Range

Если кто-то вдруг пропустил, то теперь медиазапросы можно писать проще и понятнее.

Раньше нужно было делать так:

@media (max-width: 1000px) {
    /* ... */
}

@media (min-width: 1000px) and (max-width: 1400px) {
    /* ... */
}

Теперь можно так:

@media (width <= 1000px) {
    /* ... */
}

@media (1000px <= width <= 1400px) {
    /* ... */
}

В целом доступны такие операторы сравнения:
■ < — меньше;
■ > — больше;
■ = — равно;
■ <= — меньше или равно;
■ >= — больше или равно.

Так что теперь писать медиазапросы не так больно, как раньше)

Поддержку браузерами можно глянуть здесь.