基于jquery-resizable创建可调整大小的表(table)格

<table>
    <thead>
        <th> col 1 </th>
        <th> col 2 </th>
        <th> col 3 </th>
        <th> col 4 </th>
    </thead>
    <tbody>
        <tr>
            <td> Column 1 </td>
            <td> Column 2 </td>
            <td> Column 3 </td>
            <td> Column 4 </td>
        </tr>
        <tr>
            <td> Column 1 </td>
            <td> Column 2 </td>
            <td> Column 3 </td>
            <td> Column 4 </td>
        </tr>
    </tbody>
</table>

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-resizable.js'></script>
<script>
$("td:first-child,td:nth-child(2),td:nth-child(3),th:first-child,th:nth-child(2),th:nth-child(3)").css({position: "relative" }).prepend("<div class='resizer'></div>").resizable({
  resizeHeight: false,
  handleSelector: "",
  onDragStart: function (e, $el, opt) {
    if (!$(e.target).hasClass("resizer"))
    return false;
    return true;
  } });
</script>

//$("td,th")
$("td:first-child,td:nth-child(2),td:nth-child(3),th:first-child,th:nth-child(2),th:nth-child(3)").
css({
  /* 需要包含 resizer */
  position: "relative" })
/* 检查 .resizer CSS */.
prepend("<div class='resizer'></div>").
resizable({
  resizeHeight: false,
  // 通过 .resizer 元素，使用列作为句柄和筛选器
  handleSelector: "",
  onDragStart: function (e, $el, opt) {
    // 只拖拽 resizer
    if (!$(e.target).hasClass("resizer"))
    return false;
    return true;
  } });