Table Selector

HTML

<div class="table-dimension">
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
    </div>
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add">фвфй  ц  йцы
        ывфывфы</div>
        <div class="cell-add">  йц  йц  йц  йц</div>
        <div class="cell-add"></div>
    </div>
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
    </div>
    <div class="row-add">
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
        <div class="cell-add"></div>
    </div>
    <div class="table-dimension-result">0x0</div>
</div>

Column highlighting works,<br> row highlighting does not.

CSS

.table-dimension {
    padding:10px;
    font-size:10px;
    line-height:0;
}
.table-dimension-result {
    margin-top:5px;
    font-size:14px;
    text-align:center;
    border:1px solid #ccc;
    line-height:1.4em;
}
.row-add {
    white-space:nowrap;
}
.cell-add {
    display:inline-block;
    width:10px;
    height:10px;
    border:5px solid #fff;
    background:#ccc
}
.cell-highlight {
    border:5px solid #fff;
    background:#ec4b22;
    cursor:pointer;
}

JavaScript

$('.cell-add').hover(
    function () {
        
        // How many rows/cols have you selected?
        var hoveredCols = $(this).index() + 1,
            hoveredRows = $(this).parent().index() + 1;
        
        // Remove old highlighting
        $('.cell-highlight').removeClass('cell-highlight');
        
        // Update the text hint
        $('.table-dimension-result').html(hoveredRows + ' x ' + hoveredCols);
        
        // Add Highlighting to selected squares from top left to cursor
        $('.row-add:lt(' + hoveredRows + ') .cell-add:not(:nth-child(1n+' + (hoveredCols+1) + '))').addClass('cell-highlight');
        
}, function () {
    // Remove old highlighting
    $('.cell-highlight').removeClass('cell-highlight');
});