JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ceWindow resizable">           
    <div class="okDiv resizable">с этим дивом всё нормально</div> 
    <br><br>
    <table>
        <tr class="first">
            <td class="resizable">Колонка 1</td>
            <td class="resizable">Колонка 2</td>
            <td class="resizable">Колонка 3</td>
            <td class="resizable">Колонка 4</td>
        </tr>						  
    </table>
</div>

CSS

.ceWindow { 
	width: 400px;
    height:  200px;
    border: double grey;
	overflow-x: scroll;
}
.okDiv{background: #f0f;width:200px;}
table {border-collapse: collapse; background:yellow;}
td {
    border-right: 1px solid #E1E1E1;
	border-bottom: 1px solid #E1E1E1;
	padding: 2px 4px;
    white-space: nowrap;
    overflow:hidden;
}

JavaScript

var $itWorked, deltaX, deltaY;
$(document).ready(function(){
	$(".resizable:not(.dragable)").mousedown(function(e){
            e.stopPropagation();			
			$itWorked=$(this);        
            console.log("таблица");
			deltaX = e.pageX - $(this).offset().left;
            deltaY = e.pageY - $(this).offset().top;
            if ($itWorked.width() - deltaX < 8) {
                $(document).mousemove(function(e) {
                    $itWorked.css("min-width",(e.pageX - $itWorked.offset().left));
                    $itWorked.css("max-width",(e.pageX - $itWorked.offset().left));
                });            
            }
	});
        $(document).mouseup(function() {
            $(document).unbind("mousemove");
            $itWorked=null;
        });		
});