Resizable Columns Plugin

by Jones Joseph

HTML

<script src="https://jo-geek.github.io/jQuery-ResizableColumns/demo/resizableColumns.min.js"></script>
<table class="resizable">
  <thead>
  <tr>
    <th>
      col 1
    </th>
    <th>
      col 2

    </th>
    <th>
      col 3
    </th>
    <th>
      col 4
    </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        Column 1
      </td>
      <td>

        Column 2
      </td>
      <td>

        Column 3
      </td>
      <td>
        Column 4
      </td>
    </tr>
    <tr>
      <td>
        Column 1
      </td>
      <td>
        Column 2
      </td>
      <td>
        Column 3
      </td>
      <td>
        Column 4
      </td>
    </tr>
  </tbody>
</table>

CSS

body{
  margin:0px;
}

table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}

td,th{
  border:1px solid silver;
  text-align:left;
  padding:10px;
}

th{
  color:white;
  background-color:#444;
}

JavaScript

$(function(){
$('table.resizable').resizableColumns();
})