为

Question

我一直在玩jquery-ui resizable（）插件来调整内容可编辑div中的表格。

我希望能够从表格行调整行高，但标准设置将南方处理程序放在表格的底部，实际上远远低于表格的实际大小。

我一直在使用CSS来尝试让每个行处理程序设置在行边框上，但只是不能准确地获取它并在行增长时保持在边框上。

这是代码，如果有人可以请求帮助。

＆＃13;

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我能得到的最近的是从.ui-resizable -s类中移除底部：-5px但是将它放在行的顶部。

https://jsfiddle.net/kzud925q/35/ - 如果嵌入式无法正常工作。

Answer 1

使用td调用resizable函数为tr

使用以下功能

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

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