셀 경계 너머로 CSS 호버 효과 확장: Cols, Colgroups에서 테이블 강조 표시

표 형식으로 데이터를 표시할 때 마우스를 올리면 특정 셀 강조 표시 바람직한 경우가 많습니다. 그러나 마우스를 올린 셀과 교차하는 행과 열을 강조 표시하면 데이터 명확성을 더욱 향상시킬 수 있습니다. 이는 테이블이 여러 측정 단위에 걸쳐 있을 때 특히 유용합니다.

순수한 CSS 솔루션

다행히도 순수 CSS를 사용하면 이 확장된 강조 효과를 얻을 수 있습니다. 의사 요소(::before, ::after), z-index 조작 및 절대 위치 지정을 활용하여 셀 경계를 넘어 확장되는 하이라이트 오버레이를 만들 수 있습니다.

구현

다음 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이 포함됩니다.