html - 为行设计 jquery 可调整大小的处理程序

Question

我一直在使用 jquery-ui resizable() 插件来调整内容可编辑 div 中表格的大小。

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

我一直在尝试使用 CSS 来尝试让每个行处理程序都设置在行边框上，但就是无法准确设置并随着行的增长保持在边框上。

如果有人需要帮助，这是代码。

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

我能得到的最接近的方法是从 .ui-resizable-s 类中删除 bottom: -5px，但这会将它放在行的顶部。

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

Answer 1

用td调用resizable函数到tr

使用下面的函数

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

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