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>