Fork me on GitHub
Grab the column borders and drag 'em! Bonus: refresh the page.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<script src="/path/to/jquery.js"></script>
<script src="/path/to/store.js"></script>
<script src="/path/to/jquery.resizableColumns.js"></script>

<table class="table table-bordered" data-resizable-columns-id="demo-table">
<thead>
  <tr>
    <th data-resizable-column-id="#">#</th>
    <th data-resizable-column-id="first_name">First Name</th>
    <th data-resizable-column-id="last_name">Last Name</th>
    <th data-resizable-column-id="username" data-noresize>Username</th>
  </tr>
</thead>
<tbody>
  ...
</tbody>
</table>

<script>
$(function(){
  $("table").resizableColumns({
    store: window.store
  });
});
</script>