Drag the mouse to adjust the width of the table column as shown in the figure:   I. introduction document:

<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/js/store.js" type="text/javascript"></script>
<script src="/js/jquery.resizableColumns.js" type="text/javascript"></script>

Second, the TABLE

<table id="myTable" border="1">
<thead>
<tr>
<th data-resizable-column-id="a"><input type="checkbox" /></th>
<th data-resizable-column-id="b"> The column type  </th>
<th data-resizable-column-id="c"> The name of the event  </th>
<th data-resizable-column-id="d"> state  </th>
<th data-resizable-column-id="e"> Operating options </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td> The youth journal </td>
<td>2014 The annual youth diary essay  </td>
<td> submit  </td>
<td> audit </td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td> The story of me and my children growing up </td>
<td> Growth story  </td>
<td> through  </td>
<td> audit </td>
</tr>
</tbody>
</table>

The above HTML is only used as a Demo and is not actually used in my project, and it was not implemented during testing. Depressed…

Three, the realization of the table can be dragged

<script type="text/javascript">
$(function(){
$("#myTable").resizableColumns({
store: window.store
});
})
</script>

Found no need to introduce store. Js < Th> The data-resizable-column-id attribute is also not required

And $(” # myTable ”). ResizableColumns (); Also can realize the function

The required file download address: (link: http://xiazai.jb51.net/201405/yuanma/jquery-resizableColumns.zip)

Unzip the two files separately

Jquery. ResizableColumns. Js in \ jquery - the resizable columns - gh - pages \ dist directory

Store.js is under the path store.js-master