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

Posted 2023-03-05

【中文标题】如何使 html 表格列可调整大小？

【英文标题】：How to make html table columns resizable?

【发布时间】：2017-05-31 04:23:23

【问题描述】：

我有一个相当标准的引导样式 <table>。我想使该表的列可调整大小，例如通过单击并拖动<th> 元素的右边框。我不能使用任何 jQuery 插件，因为我正在使用 Angular 并且 jQuery 依赖是不可接受的。

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

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

【问题讨论】：

有导游here。它使用了一些 jQuery，但没有什么不能用简单的原生 javascript 代替。

【参考方案1】：

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

试试下面的sn-p

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>

【讨论】：

这有帮助。调整大小后如何获得新的宽度？

如果你想知道新的宽度，那么你需要使用jquery获取div的宽度，因为没有定义新的宽度

这不适用于 IE 11。它也不适用于 Edge。我怀疑由于缺乏对 CSS resize 的支持，两者都失败了。

很好的例子！！

当您将表格设为 100% 宽度时，此解决方案会出现问题。调整大小吓坏了。