colResizableは良い解決策ですが、最初の列幅をサポートしていません。ライブラリが開始されるとすぐに、最初の列幅が変更されます。
この投稿は一種の解決策を提供しましたが、そのソース コードは colResizable (少なくとも最新のもの) とは異なります。コメントは落胆し、github リンクは壊れています。
他の解決策は、ヘルプやサンプルのないライブラリです。
列幅を変更できる他のプラグインやスニペットはありますか? 初期幅を維持することは必須です。「div」は適用されません。それはテーブルでなければなりません。
アップデート：
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>
jquery.resizable を使用しており、他のウィジェットよりもシンプルに見えますが、初期サイズに問題があります。最小幅と最大幅を定義できますが、事前定義された固定幅は定義できません。初期幅を設定でき、列を広げることができますが、初期サイズに比べて締めることはできません。