如何使html表格列可调整大小？ [英] How to make html table columns resizable?

问题描述

我有一个相当标准的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表格列可调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！