tableの幅を変更できるプラグイン「jQuery Resizable Columns」を使ってみる

tableの列の幅をドラッグで変更させたいことがあったので、jQueryプラグインの「jQuery Resizable Columns」を使ってみました。

設定方法

Githubのページからダウンロードできます。
ダウンロードしたファイルのdistフォルダ内にcssとjsがあるので、jQueryと合わせて読み込ませます。

<link rel="stylesheet" href="./jquery.resizableColumns.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./jquery.resizableColumns.min.js"></script>

HTMLにtableタグを追加します。

<table>
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Username</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>花</td>
			<td>白咲</td>
			<td>hana</td>
		</tr>
		<tr>
			<td>ひなた</td>
			<td>星野</td>
			<td>hinata</td>
		</tr>
		<tr>
			<td>乃愛</td>
			<td>姫坂</td>
			<td>noa</td>
		</tr>
	</tbody>
</table>

tableの幅に何らかの値を指定しないとうまく動作しないようなので、幅を指定します。

table {
	width: 50%;
}

JavaScriptでプラグインを設定します。

$(function() {
	$('table').resizableColumns();
});

tableの列をドラッグするデモページ

ブラウザをリロードするとtableの幅は元に戻りますが、store.jsを合わせて使用すると変更した幅を保存することもできるようです。
　

【参考サイト】

• jQuery Resizable Columns