Question

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

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

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

Answer 1

resize属性不适用于表。这就是为什么你需要在表th和td中放置一个div，然后调整它的大小。

尝试以下代码段

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

唐＆＃39;吨。请改用bootstrap。让bootstrap决定为最终用户调整大小 - 调整列的大小在设备上无法正常工作。 - 您最终可能会被迫记住服务器或浏览器中的列宽，这可能会导致很多工作。它会在那里结束吗？列应重新排序吗？它们应该是可删除的吗？最好做出一些设计选择，而不是在最终用户身上铲掉所有东西。

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

2 个答案: