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 が含まれます: