Javascript 如何在JSFIDLE上创建具有可调整大小的行和列（如HTML、CSS、JS框）的表？

我已经使用html表成功创建了3个视图框。每个视图都可以隐藏。现在我希望每个视图的宽度和高度都可以调整大小，这与JSFIDLE中每个代码编辑框可以调整大小的方式非常相似。我发现了一个jQuery小部件，但它只允许调整列的大小，而不允许调整框的大小。我也发现了这一点，但它不是用表实现的。这是我到目前为止所拥有的

var-tds=document.getElementsByTagName（'td'）；
var inputs=document.getElementsByTagName（'input'）；
var rows=document.getElementsByTagName（'tr'）；
控制台日志（输入）；
控制台日志（tds）；
var changeView=函数（）{
对于（变量i=0；i
html{
身高：100%；
}
身体{
身高：100%；
}
桌子{
宽度：100%；
身高：90%；
}
表td{
文本对齐：居中；
边框：1px纯黑；
}
#视图容器{
身高：10%；
}

视图1
视图2
视图3
视图1
视图2
视图3
您可以使用jQuery UI
.resizeable（）
，尽管在表格显示方面有点棘手，需要一些额外的代码

看看这把小提琴：

我为视图1和视图2添加了两个ID：

<tr>
    <td id="v1">View 1</td>

    <td id="v2">View 2</td>
</tr>

当然，您可以根据自己的需要调整
minWidth
、
maxWidth
和
maxHeight
选项。
您可以使用jQuery UI查看这一点，这可能会有所帮助。它有一个@DanielKobe，这就是你要找的吗？我可以知道答案中
句柄的意义吗？@PardeepJain句柄选项用于指示可以抓住元素的哪一侧来调整大小。“e”表示东方，“s”表示南方，因此元素的右边缘和下边缘。哦，好的，非常感谢您提供的信息，但无论如何，mt Resizeable不起作用，您知道为什么吗？
$(window).on("load resize", function() {

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var v1Width = $("#v1").width()


    $("#v1").resizable({
        minWidth: 50,
        maxWidth: windowWidth - 80,
        maxHeight: windowHeight * (.83),
        handles: "e, s"
    }).on("resize", function() {

        if (v1Width == $("#v1").width()) {
            $("#v2").height(0)
        }
        v1Width = $("#v1").width()
    });

    $("#v2").resizable({
        maxHeight: windowHeight * (.83),
        handles: "s"
    }).on("resize", function() {
        $("#v1").height(0)
    });

});