样式 jquery 行的可调整大小处理程序

Question

我一直在玩 jquery-ui resizable() 插件来调整内容 editable div 中 table 的大小。

我希望能够调整 table 行的行高，但标准设置将南处理程序方式放在 table 的底部，实际上远低于table.

的实际大小

我一直在使用 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 class 中删除底部：-5px 但这会将它放在行的顶部。

https://jsfiddle.net/kzud925q/35/ - 以防嵌入式不工作。

Answer 1

用 td 调用可调整大小的函数到 tr

使用下面的函数

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

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

样式 jquery 行的可调整大小处理程序

styling jquery resizable handler for rows

html

css

jquery-ui-resizable