How to make html table columns resizable?

Question

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

Answer 1

The resize property does not work with table. That's why you need to put a div inside the table th and td, then resize it.

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