Расширение эффектов CSS при наведении за границы ячеек: выделение таблиц в столбцах, группах столбцов

При отображении данных в табличной форме выделение определенных ячеек при наведении часто желательно. Однако выделение строки и столбца, пересекающихся с наведенной ячейкой, может еще больше повысить четкость данных. Это особенно полезно, когда таблица охватывает несколько единиц измерения.

Решение на чистом CSS

К счастью, добиться такого расширенного эффекта выделения можно с помощью чистого CSS. Используя псевдоэлементы (::before, ::after), манипулирование z-индексом и абсолютное позиционирование, мы можем создавать наложения выделения, выходящие за границы ячеек.

Реализация

Следующий код CSS иллюстрирует реализацию:

table {
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

td:hover::after,
.col:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

HTML-структура

Соответствующая HTML-структура включает дополнительные классы .row и .col для заголовков строк и столбцов соответственно: