我有一個相當標準的自舉風格& lt表& gt。我想調整該表的列的大小，例如，通過單擊并拖動& ltth & gt元素。我不能使用任何jQuery插件，因為我正在使用Angular和jQuery依賴是不可接受的。

我在想，如果我能在& ltth & gt元素，我可以實現自己的調整大小邏輯(監視水平鼠標移動并相應地調整寬度)，但我不知道如何做到這一點(據我所知，沒有與元素邊框相關的事件)。

讓用戶調整列大小的最好方法是什么？沒有jQuery(最好是在Angular 2上下文中)。

resize屬性不適用于表格。這就是為什么您需要在表th和td中放置一個div，然后調整它的大小。

嘗試下面的片段

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>

以下是一些編寫得很好的可調整大小列的示例代碼:https://www . exe ideas . com/2021/11/resizable-columns-of-table-JavaScript . html 它不同于將div放入每個表字段，它有更多可讀的可調整大小的表作為結果。