風格jQuery可調整行大小的處理程序

Question

我一直在玩jquery-ui resizable（）插件來調整內容可編輯div中的表的大小。

我希望能夠從表格行調整行高，但標準設置將南方處理程序放置在表格底部，實際上遠低於表格的實際大小。

我一直在玩CSS試圖讓每個行處理程序設置在行邊界上，但只是無法準確獲取，並且隨着行的增長而停留在邊界上。

這裏是代碼，如果任何人可以請幫助。

$(document).ready(function(){ 
 
\t $('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>

最近我可以是移除底部：從的.ui調整大小-S類-5px而是將其置於行的頂部。

https://jsfiddle.net/kzud925q/35/ - 如果嵌入式不起作用。

Answer 1

呼叫與td可調整大小的功能，TR

使用下面的函數

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

更新的jsfiddle https://jsfiddle.net/kzud925q/36/