Javascript 如何调整html表列的大小？

我有一个相当标准的引导样式

。我想通过单击并拖动

元素的右边框来调整此表的列的大小。我不能使用任何jQuery插件，因为我使用的是Angular，jQuery依赖项是不可接受的

我在想，如果我能捕捉到

元素右边框上的click/mousemove事件，我就可以实现我自己的大小调整逻辑（监视鼠标水平移动并相应地调整宽度），但我不知道如何做到这一点（据我所知，没有与元素边框相关的事件）

---

让用户调整列大小的最佳方法是什么？没有jQuery（最好是在Angular 2上下文中）。

resize属性不适用于表。这就是为什么需要在表

th

和

td

中放置一个div，然后调整其大小

请尝试下面的代码片段

表格{
边界塌陷：塌陷；
边界间距：0px；
}
运输署{
边框：2件纯黑；
填充：0；
边际：0px；
溢出：自动；
}
div{
调整大小：两者；
溢出：自动；
宽度：120px；
高度：120px；
边际：0px；
填充：0px；
边框：1px纯黑；
显示：块；
}
运输署分区{
边界：0；
宽度：自动；
高度：自动；
最小高度：20px；
最小宽度：20px；
}

一
二
三
四
五
6
七
八
9

这很有帮助。调整大小后如何获得新宽度？如果您想知道新宽度，则需要使用jquery并获取div的宽度，因为新宽度未定义这不适用于IE 11。它对Edge也不起作用。我怀疑这两种方法都失败了，因为它们都不支持CSS

resize

。很好的例子！！当您将表格设置为100%宽度时，此解决方案存在问题。重新调整尺寸的人都疯了，有向导。它使用了一些jQuery，但没有什么不能用简单的普通JavaScript替代的。