#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Posts
    11
    Rep Power
    0

    Change table cell highlight for first 3 rows


    Hello friends!
    I have this table with row highlighting it highlights the rows in different colours (first 3 in dark and later in blue). I wonder If I can also change the table cell highlight to yellow for the first three rows and keep the rest as it is now?
    Here is the style:

    Code:
    <style>
    body {
        background-color: #0D0D0D;
    }
    
    tr:hover{
    	background: #0000F7;
    	color: rgb(102,102,102);
    }
    
    
    tr:hover td{
      background: transparent !important;
    }
    
    tr td:hover {
    	background-color: #609 !important;
    }
    
    tr:nth-child(1):hover {
        background-color: #292C31;
    }
    
    tr:nth-child(2):hover {
        background-color: #292C31;
    }
    tr:nth-child(3):hover {
        background-color: #292C31;
    }
    
    a {
    	color:#BFBFBF !important;	
    }
    
    a {
    text-decoration:none !important;
    }
    
    
    </style>
    And the file itself:
    https://jsfiddle.net/33bxg04e/

    Thanking you!)
    Dave
  2. #2
  3. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2011
    You can try to do it in similar way as the row background - by using the nth-child selector:
    Code:
    tr:nth-child(1) td:hover {
    	background-color: yellow !important;
    }
    
    tr:nth-child(2) td:hover {
    	background-color: yellow !important;
    }
    
    tr:nth-child(3) td:hover {
    	background-color: yellow !important;
    }
    test link: https://jsfiddle.net/33bxg04e/8/

    But I would make a class which you then can add at any row you want this to happens:
    Code:
    .specialhover td:hover {
    	background-color: green !important;
    }
    
    <tr height=15 style='height:15.0pt' class="specialhover">
      <td height=15 class=xl6421017 width=48 style='height:15.0pt;width:48pt'>A</td>
      ...
    </tr>
    <tr height=15 style='height:15.0pt' class="specialhover">
      <td height=15 class=xl6421017 style='height:15.0pt;border-top:none'>B</td>
      ..
    <tr
    Test page link: https://jsfiddle.net/33bxg04e/11/
    At this test page, you will notice the cell highlight is green for the first two rows, as those tr tags has the class "specialhover" specified.

IMN logo majestic logo threadwatch logo seochat tools logo