توسيع تأثيرات التحويم في CSS إلى ما وراء حدود الخلايا: تمييز الجداول في Cols، Colgroups

عند عرض البيانات في شكل جدول، يتم تمييز خلايا معينة عند التمرير غالبا ما يكون مرغوبا فيه. ومع ذلك، فإن تمييز الصف والعمود المتقاطع مع الخلية التي تم تمرير مؤشر الماوس عليها يمكن أن يزيد من تحسين وضوح البيانات. يكون هذا مفيدًا بشكل خاص عندما يمتد الجدول على عدة وحدات قياس.

حل CSS النقي

لحسن الحظ، تحقيق تأثير التمييز الممتد هذا ممكن باستخدام CSS النقي. من خلال استخدام العناصر الزائفة (::قبل، ::بعد)، ومعالجة مؤشر 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 لرؤوس الصفوف والأعمدة، على التوالي: