Detect if mouse is over a column border

css, html, javascript, jquery

Solution

You should check if the offsetX and offsetY are less than the border-width and if so you're in the border, also check if offsetX is greater than innerWidth or offsetY is greater than innerHeight

$('td').hover(function(e){
    var border_width = parseInt($(this).css('border-width'));
    if(e.offsetX < border_width || e.offsetX > $(this).innerWidth() || e.offsetY < border_width || e.offsetY > $(this).innerHeight()){
        console.log('This is the border');  
    }
});

Here's a jsFiddle

Problem

Does anybody know how can I detect if mouse is over a column border or a cell border, either by jQuery or JavaScript? I want to implement a column resizing on a specific table. Any help is appreciated.

Original source