colResizable is a good solution, but it doesn't support initial column widths. As soon as library is started, initial column widths are changed.
this post has provided a kind of solution but its source code is not similar to colResizable(at least the latest one). Comments are discouraging and the github link is broken.
Other solutions are some libraries without any help or sample.
Is there any other plugin or even snippet available that I can change column widths? keeping initial widths is mandatory. "div"s are not applicable; it must be table.
Update:
I found the following code snippet on codepen.io:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui-1.9.2.custom.css" />
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<style>
body {
font-family: Arial;
font-size: 10pt;
}
table#demo-table th {
background-color: #006;
color: #fff;
}
table#demo-table th,
table#demo-table td {
white-space: nowrap;
padding: 3px 6px;
}
table.cellpadding-0 td {
padding: 0;
}
table.cellspacing-0 {
border-spacing: 0;
border-collapse: collapse;
}
table.bordered th,
table.bordered td {
border: 1px solid #ccc;
border-right: none;
text-align: center;
}
table.bordered th:last,
table.bordered td:last {
border-right: 1px solid #ccc;
}
</style>
</head>
<body>
<table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
<thead>
<tr>
<th id='column-header-1'>Column Header 1<div id='column-header-1-sizer'></div></th>
<th id='column-header-2'>Column Header 2<div id='column-header-2-sizer'></div></th>
<th id='column-header-3'>Column Header 3<div id='column-header-3-sizer'></div></th>
<th id='column-header-4'>Column Header 4<div id='column-header-4-sizer'></div></th>
<th id='column-header-5'>Column Header 5<div id='column-header-5-sizer'></div></th>
<th id='column-header-6'>Column Header 6<div id='column-header-6-sizer'></div></th>
<th id='column-header-7'>Column Header 7<div id='column-header-7-sizer'></div></th>
<th id='column-header-8'>Column Header 8<div id='column-header-8-sizer'></div></th>
<th id='column-header-9'>Column Header 9<div id='column-header-9-sizer'></div></th>
<th id='column-header-10'>Column Header 10<div id='column-header-10-sizer'></div></th>
<th id='column-header-11'>Column Header 11<div id='column-header-11-sizer'></div></th>
<th id='column-header-12'>Column Header 12<div id='column-header-12-sizer'></div></th>
<th id='column-header-13'>Column Header 13<div id='column-header-13-sizer'></div></th>
<th id='column-header-14'>Column Header 14<div id='column-header-14-sizer'></div></th>
<th id='column-header-15'>Column Header 15<div id='column-header-15-sizer'></div></th>
<th id='column-header-16'>Column Header 16<div id='column-header-16-sizer'></div></th>
<th id='column-header-17'>Column Header 17<div id='column-header-17-sizer'></div></th>
<th id='column-header-18'>Column Header 18<div id='column-header-18-sizer'></div></th>
<th id='column-header-19'>Column Header 19<div id='column-header-19-sizer'></div></th>
<th id='column-header-20'>Column Header 20<div id='column-header-20-sizer'></div></th>
<th id='column-header-21'>Column Header 21<div id='column-header-21-sizer'></div></th>
<th id='column-header-22'>Column Header 22<div id='column-header-22-sizer'></div></th>
<th id='column-header-23'>Column Header 23<div id='column-header-23-sizer'></div></th>
<th id='column-header-24'>Column Header 24<div id='column-header-24-sizer'></div></th>
<th id='column-header-25'>Column Header 25<div id='column-header-25-sizer'></div></th>
</tr>
</thead>
<tbody>
<td>My Data 1</td>
<td>My Data 2</td>
<td>My Data 3</td>
<td>My Data 4</td>
<td>My Data 5</td>
<td>My Data 6</td>
<td>My Data 7</td>
<td>My Data 8</td>
<td>My Data 9</td>
<td>My Data 10</td>
<td>My Data 11</td>
<td>My Data 12</td>
<td>My Data 13</td>
<td>My Data 14</td>
<td>My Data 15</td>
<td>My Data 16</td>
<td>My Data 17</td>
<td>My Data 18</td>
<td>My Data 19</td>
<td>My Data 20</td>
<td>My Data 21</td>
<td>My Data 22</td>
<td>My Data 23</td>
<td>My Data 24</td>
<td>My Data 25</td>
</tbody>
</table>
<script type="text/javascript">
$(function () {
var thHeight = $("table#demo-table th:first").height();
$("table#demo-table th").resizable({
handles: "e",
minHeight: thHeight,
maxHeight: thHeight,
minWidth: 40,
resize: function (event, ui) {
var sizerID = "#" + $(event.target).attr("id") + "-sizer";
$(sizerID).width(ui.size.width);
}
});
});
</script>
</body>
</html>
it uses jquery.resizable and seems simpler than other widgets, but again has problem with initial size: You can define min & max widths, but not a fixed predefined width. Initial width can be set, column can be widened, but not tightened compared to initial size.
