Problemas con jquery ui Resizable

[kriss8725]

Buenas tardes, tengo un problema con esta libreria, cuando hago mas grande un div, utilizando la opcion grid, para que cresca cada ciertos pixeles, al irlo agrandando el tamaño va disminuyendo por ejemplo:

Tengo una tabla con 5 celdas cada una mide 10 px de ancho y un div en la primer celda el cual quiero extender hasta la ultima celda, la opcion grid de esta libreria la tengo que cresca cada 10 px, pero al llegar a la ultima celda el div no mide los 50 px que debe de medir si no disminuyo su tamaño y no encuentro cual es el problema.

Esta es mi pequeña funcion:

Código:

$("#days-table tbody tr td").on("mousedown", function(event){
								   var celdaInicio = $(this).attr("id");
								   
								   if(!$("#"+celdaInicio+" .newReserva").length){							   
									 var anchoFinal;
									 var anchoTabla = $("#days-table").width();
									 
									 if(anchoTabla == 818){
										var border = 2;   
									 }else if(anchoTabla == 819){
										var border = 3;
									 }
									 
									 var anchoCelda = Math.floor(anchoTabla / totalDias) - border;
									 var gridCelda = anchoCelda + border;
									 
									 $("#"+celdaInicio).append("<div style=\'width:"+anchoCelda+"px\' class=\'newReserva\'><span title=\'Eliminar reservación\' onclick=\'borrarReservacion(\""+celdaInicio+"\")\' class=\'eliminar\'></span><span class=\'resizeDiv\'></span></div>");	 
									 $(".newReserva").resizable
													({
													   grid: gridCelda,
													   minWidth: anchoCelda,
													   maxWidth: anchoTabla,
													   create: function(event, ui){
																 anchoFinal = $(this).width();
																 agregarReserva(anchoFinal,anchoCelda,celdaInicio);
															   },
													   stop: function(event, ui){
															   anchoFinal = $(this).width();
															   agregarReserva(anchoFinal,anchoCelda,celdaInicio);
															 }
													});
								   }
							  });

Espero me puedan ayudar