tableの行列のヘッダを固定、データをスクロール

ExcelのようなテーブルをjQueryで再現、プラグイン

jQuery

$(function () { // セル高さ、セル幅 $('th, td').each(function(){ $(this).css({ 'min-width': $(this).width() + 'px', 'min-height': $(this).height() + 'px' }); }); // 枠組み(left_head, right_head, left_body, right_body) $('#mock').append('<div id="left_head"><div><table></table></div></div><div id="right_head"><div><table></table></div></div><div id="left_body"><div><table></table></div></div><div id="right_body"><div><table></table></div></div>'); // 4枠に部品を配置 $('#left_head div table, #right_head div table').html($('#mock').find('thead')); $('#left_body div table, #right_body div table').html($('#mock').find('tbody')); // 不要箇所を削除 $('#left_head th:not(:eq(0)), #right_head th:eq(0), #left_body td, #right_body th, #mock > table').remove(); //上固定セル高さ(top) var head_height = 30; $('#left_head th, #right_head th').css('height', head_height + 'px'); $('#left_body, #right_body').css('top', $('#left_head tr').height() + 'px'); // 左固定セル幅(left) var left_width = 50; $('#left_head th, #left_body th').css('width', left_width + 'px'); $('#right_head, #right_body').css('left', $('#left_head tr').width() + 'px'); // スクロール表示領域幅 var table_width = 250; // スクロール表示領域高さ var table_height = 150; $('#right_head').css('width', table_width + 'px'); $('#left_body').css('height', table_height + 'px'); $('#right_body').css({'width': table_width + 'px', 'height': table_height + 'px'}); // 表示領域のスクロール $('#right_body').scroll(function() { $('#left_body div').offset( { top : $('#right_body div').offset().top} ); $('#right_head div').offset( { left : $('#right_body div').offset().left} ); }); });

CSS

#mock { position: relative; font-size: 85%; } #left_head { position: absolute; top: 0; left: 0; } #right_head { position: absolute; top: 0; overflow: hidden; } #left_body { position: absolute; #left: 0; overflow: hidden; } #right_body { position: absolute; overflow: scroll; } #mock > table tbody { border-right: 1px solid #999; border-bottom: 1px solid #999; } #mock > table thead th:first-child, #left_head th { padding: 4px 8px; background: #cce4eb; border-top: 1px solid #999; border-left: 1px solid #999; color: #000; } #mock > table thead th:not(:first-child), #right_head th { padding: 4px 8px; background: #cce4eb; border-top: 1px solid #999; border-left: 1px solid #999; color: #000; } #mock > table thead th:nth-last-child(1), #right_head th:nth-last-child(1) { border-right: 1px solid #999; } #mock > table tbody th, #left_body th { display: table-cell; padding: 2px 8px; background: #e0e4e4; border-top: 1px solid #999; border-left: 1px solid #999; color: #111; white-space: nowrap; } #mock > table tbody th:nth-last-child(1), #left_body th:nth-last-child(1) { border-bottom: 1px solid #999; } #mock > table tbody td, #right_body td { padding: 2px 8px; background: #eee; border-top: 1px solid #999; border-left: 1px dashed #999; background: #fcfcfc; white-space: nowrap; }

border、paddingのサイズを上下左右で統一。

HTML

<!-- id="mock"の中にtableを記述 --> <div id="mock"> <table> <!-- theadが上部 --> <thead> <tr> <th>&nbsp;</th> <th>A</th> <th>B</th> </tr> </thead> <!-- tbodyが下部、tdがスクロール範囲 --> <tbody> <tr> <th>1</th> <td>Apple</td> <td>リンゴ</td> </tr> (略) <tr> <th>8</th> <td>Basketball</td> <td>バスケットボール</td> </tr> </tbody> </table> </div>

サンプル

jQuery Plugin

プラグイン作成しました。

jquery_plugin_grid.zip

v 1.0.1 : th部分の複数行対応を組み込みました。
v 1.0.0 : Grid(Excel-like Table) / jQuery Plugin 作成しました。

動作環境

jQuery 1.11.2, 2.1.3
Chrome 36, Firefox 31, Internet Explorer 11, Opera 23, Safari 5

上記コードを拡張したものです。
詳細はZipに梱包されているファイルをご確認ください。

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。