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> </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
プラグイン作成しました。
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に梱包されているファイルをご確認ください。
