如何使html表列可调整大小？

Question

我有一个相当标准的bootstrap风格<table>.我想使这个表的列可以调整大小,例如通过单击并拖动<th>元素的右边框.我不能使用任何jQuery插件,因为我使用Angular并且jQuery依赖是不可接受的.

我想如果我可以在<th>元素的右边界上捕捉click/mousemove事件,我可以实现我自己的调整大小逻辑(监视水平鼠标移动并相应地调整宽度),但我不知道如何做到这一点(据我所知,没有与元素边界相关的事件.

使用户可以调整列的最佳方法是什么？没有jQuery(最好是在Angular 2上下文中).

Answer 1

该resize属性不适用于表.这就是为什么你需要把一个div表内th和td,然后调整其大小.

试试下面的代码片段

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>