我有一个相当标准的bootstrap风格的< table> 。我想让这个表的列可以调整大小,例如通过点击并拖动< th> 元素的右边框。我不能使用任何jQuery插件,因为我使用的是Angular,而jQuery依赖是不可接受的。
我在想,如果我可以捕获click / mousemove事件(code>< th> )元素的右边框,我可以实现自己的调整大小逻辑(监视水平鼠标移动并相应地调整宽度),但我不知道这是如何实现的(据我所知,没有与元素边界相关的事件)。
使用户可以调整列大小的最佳方法是什么?没有jQuery(最好 - 在Angular 2上下文中)。
解决方案resize property not work with table,这就是为什么你需要在表th和td中放置一个div,然后调整它的大小,尝试使用下面的代码片段
table {border-collapse:collapse; border-spacing:0px;} td {border:2px纯黑;填充:0; margin:0px; overflow:auto;} div {resize:both;溢出:自动; width:120px; height:120px; margin:0px; padding:0px;边框:1px纯黑色; display:block;} td div {border:0;宽度:自动;身高:自动; min-height:20px; min-width:20px;}
< table> < TR> < TD>< DIV - 酮< / DIV>< / TD> < TD>< DIV>二< / DIV>< / TD> < TD>< DIV>三< / DIV>< / TD> < / TR> < TR> < TD>< DIV>四< / DIV>< / TD> < TD>< DIV>五< / DIV>< / TD> < TD>< DIV>六< / DIV>< / TD> < / TR> < TR> < TD>< DIV> 7< / DIV>< / TD> < TD>< DIV> 8< / DIV>< / TD> < TD>< DIV> 9< / DIV>< / TD> < / TR> < / table>
I have a fairly standard bootstrap-styled <table>. I want to make columns of this table resizable, e.g. by click-and-dragging right border of <th> element. I can't use any jQuery plugins as I'm using Angular and jQuery dependency is not acceptable.
I was thinking that if I could catch the click/mousemove event on the right border of <th> element, I could implement my own resizing logic (monitor horizontal mouse movement and adjust width accordingly), but I don't know how this can be done (there is no such thing as element border-related event as far as I know).
What's the best way to make columns resizable by user? Without jQuery (and preferably - in Angular 2 context).
解决方案resize property not work with table, thats why you need to put a div inside the table th and td , then resize it, try with below snippet
table { border-collapse: collapse; border-spacing: 0px; } td { border: 2px solid black; padding: 0; margin: 0px; overflow: auto; } div { resize: both; overflow: auto; width: 120px; height: 120px; margin: 0px; padding: 0px; border: 1px solid black; display:block; } td div { border: 0; width: auto; height: auto; min-height: 20px; min-width: 20px; }<table> <tr> <td><div>one</div></td> <td><div>two</div></td> <td><div>three</div></td> </tr> <tr> <td><div>four</div></td> <td><div>five</div></td> <td><div>six</div></td> </tr> <tr> <td><div>seven</div></td> <td><div>eight</div></td> <td><div>nine</div></td> </tr> </table>
更多推荐
如何使html表格列可调整大小?
发布评论