styling jquery resizable handler for rows

Question

I have been playing with the jquery-ui resizable() plugin to resize a table in a content editable div.

I want to be able to resize row heights from the table row, but the standard setup places the south handlers way, way at the bottom of the table, in fact far below the actual size of the table.

I have been playing with the CSS to try and get each row handler to set on the row border but just can't get it exact and to stay on the border as the row grows.

Here is the code if anyone could please help.

$(document).ready(function(){
	$('tr').resizable({
    handles: "s"
  });
});

table {
  width: 100px;
  height: 100px;  
}

table tr td{
  border: 1px solid lightgrey;
}

tr.ui-resizable > div.ui-resizable-s {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="MyEditor" contenteditable="true" style="height:300px; width:300px; background-color:white;">
  <table contenteditable="false">
    <tbody contenteditable="false">
      <tr contenteditable="false">
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
      </tr>
      <tr contenteditable="false">
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
      </tr>
       <tr contenteditable="false">
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
      </tr>
      <tr contenteditable="false">
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
        <td contenteditable="false">
          <span contenteditable="true"><br /></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Closest i can get is by removing the bottom: -5px from the .ui-resizable-s class but that places it at the top of the row.

https://jsfiddle.net/kzud925q/35/ - in case the embedded doesn't work.

Answer 1

call the resizable function with td to tr

use the below function

$(document).ready(function(){
$('td').resizable({
handles: "s"
});
});

updated jsfiddle https://jsfiddle.net/kzud925q/36/