csshovercss-tablestablerow

CSS table tr hover one color/border and td hover another color/border without important


I have the following fiddle.

Edit: with row boarder style be applied:

table,th,td
{
    border:2px solid black;
    border-collapse:collapse;
}
tr:hover td
{
    background-color:grey;
    border-top: 2px solid rgb(10, 0, 255);
    border-bottom: 2px solid rgb(10, 0, 255);
}
td:hover
{
    background-color:rgb(214,214,214) !important;
    border:2px solid red !important;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

What I'm after is highlighting the ROW and CELL. Originally had thought doing sort of cross-hair, but column background coloring would need JavaScript, which I'll avoid for the time being.

On this would like the ROW:hover background color darkish and border emphasized.

The td:hover then to be a different color, and border emphasized differently.

Checked in Chrome, not checked Firefox.

Issues: need to use !important. Cell border-left and top not coloring to red?

So is there a way to write the CSS not using important!, and correct border styling on the TD cell?


Solution

  • You can do your original crosshairs idea with just CSS (no Javascript). Use the ::before and ::after pseudo-elements for highlighting. There's a slight issue with Firefox with this method, so I wrote a fix for it.

    border-collapse: collapse makes borders on <tds> behave in strange ways. Instead, put your borders on the <trs> and <cols>. border-collapse: collapse also cuts off edges. To deal with that you have to get creative and draw an extra border on all the outside <tds> and <ths>. Even stranger, it "eats" a pixel on the top and two pixels on the bottom. So you need 3px on top to get a 2px border, and 4px on bottom to get a 2px border.

    Demo: jsFiddle

    CSS:

    table {
        border-collapse: collapse;
        overflow: hidden;
        z-index: 1;
    }
    td, th, .row, .col, .ff-fix {
        cursor: pointer;
        padding: 10px;
        position: relative;
    }
    tr:last-child td {
        border-bottom: 4px solid black;
    }
    tr, col {
        border: 2px solid black;
    }
    th {
        border-top: 3px solid black;
    }
    th:last-child, td:nth-child(3n) {
        border-right: 4px solid black;
    }
    td:first-child, th:first-child {
        border-left: 3px solid black;
    }
    td:hover {
        border: 2px solid red;
    }
    td:hover:first-child {
        border-left: 3px solid red;
    }
    td:hover:nth-child(3n) {
        border-right: 4px solid red;
    }
    tr:last-child td:hover {
        border-bottom: 4px solid red;
    }
    td:hover::before,
    .row:hover::before,
    .ff-fix: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,
    .ff-fix:hover::after { 
        background-color: #ffa;
        content: '\00a0';  
        height: 10000px;    
        left: 0;
        position: absolute;  
        top: -5000px;
        width: 100%;
        z-index: -1;        
    }
    

    HTML:

    <table>
        <col /><col /><col />
        <tr>
            <th class="col">First Name</th>
            <th class="col">Middle Name</th>
            <th class="col">Last Name</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Jeffery</td>
            <td>Griffin</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Marie</td>
            <td>Griffin</td>
        </tr>
        <tr>
            <td>Margie</td>
            <td>Ann</td>
            <td>Thatcher</td>
        </tr>
    </table>
    

    Script:

    function firefoxFix() {
        if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
            var tds = document.getElementsByTagName( 'td' ),
                ths = document.getElementsByTagName( 'th' );
            for( var index = 0; index < tds.length; index++ ) {
                tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
            };
            for( var index = 0; index < ths.length; index++ ) {
                ths[index].innerHTML = 
                      '<div class="' + ths[index].className + '">' 
                    + ths[index].innerHTML 
                    + '</div>';                     
                ths[index].className = '';
            };
            var style = '<style>'
                + 'td, th { padding: 0 !important; }' 
                + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
                + '</style>';
            document.head.insertAdjacentHTML( 'beforeEnd', style );
        };
    };
    
    firefoxFix();