Left-side Row Hover Indicator

by isochronous

HTML

<table>
    <tr>
        <td>
            <div>long content in first cell</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>long content in first cell</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>long content in first cell</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>long content in first cell</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>long content in first cell</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>long content in first cell</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
        <td>
            <div>content</div>
        </td>
    </tr>
    <tr>
       ...

CSS

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    position: relative;
    padding: 8px 10px 8px 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #ccc;
}

td:first-child {
    padding-left: 20px;
}

tr.selected td {
    background: #000;
    color: #fff;
}

tr.selected:hover td {
    background: #000;
}

tr:hover td {
    background: #fff;
}

tr:hover td:first-child {
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #FFFFFF 15px, #FFFFFF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #FFFFFF 15px, #FFFFFF 100%);

/* Opera */ 
background-image: -o-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #FFFFFF 15px, #FFFFFF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #00A3EF), color-stop(15px, #00A3EF), color-stop(15px, #FFFFFF), color-stop(1, #FFFFFF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #FFFFFF 15px, #FFFFFF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to right, #00A3EF 0%, #00A3EF 15px, #FFFFFF 15px, #FFFFFF 100%);
}

tr.selected:hover td:first-child {
 /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #000000 15px, #000000 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #000000 15px, #000000 100%);

/* Opera */ 
background-image: -o-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #000000 15px, #000000 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #00A3EF), color-stop(15px, #00A3EF), color-stop(15px, #000000), color-stop(1, #000000));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #00A3EF 0%, #00A3EF 15px, #000000 15px, #000000 100%);

/* W3C Markup, IE10...

JavaScript

var $rows = $('tr');
$('table').on('click', 'td', function(event) {
    $(event.target).closest('tr').toggleClass('selected');
});