Grab the column borders and drag 'em! Bonus: refresh the page.
| # |
First Name |
Last Name |
age |
Address |
Email |
Phone |
Gender |
twitter |
website |
other |
remark |
Username |
| 1 |
thetbw |
thetbw |
20 |
china |
thetbw@thetbw.xyz |
110 |
1 |
thetbw_xyz |
thetbw.xyz |
this is a test value |
no any |
@mdo |
| 2 |
Jacob |
Thornton |
20 |
china yhahhs asa as a sa |
thetbw@thetbw.xyz |
110 |
1 |
thetbw_xyz |
thetbw.xyz |
this is a test value |
no any |
@fat |
<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>
