सेल सीमाओं से परे सीएसएस होवर प्रभाव का विस्तार: कॉलम, कोलग्रुप में तालिकाओं को हाइलाइट करना

डेटा को सारणीबद्ध रूप में प्रदर्शित करते समय, होवर पर विशिष्ट सेल को हाइलाइट करना अक्सर वांछनीय होता है. हालाँकि, होवर किए गए सेल के साथ प्रतिच्छेद करने वाली पंक्ति और स्तंभ को हाइलाइट करने से डेटा स्पष्टता में और वृद्धि हो सकती है। यह विशेष रूप से तब उपयोगी होता है जब तालिका माप की कई इकाइयों तक फैली होती है।

शुद्ध सीएसएस समाधान

सौभाग्य से, इस विस्तारित हाइलाइटिंग प्रभाव को प्राप्त करना शुद्ध सीएसएस के साथ संभव है। छद्म तत्वों (::पहले, ::बाद), जेड-इंडेक्स हेरफेर और पूर्ण स्थिति का उपयोग करके, हम हाइलाइट ओवरले बना सकते हैं जो सेल सीमाओं से परे विस्तारित होते हैं।

कार्यान्वयन

निम्नलिखित सीएसएस कोड कार्यान्वयन को दर्शाता है:

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 शामिल हैं: