jQueryテーブルスクロール縦横ヘッダ固定

ヘッダを固定縦横スクロールさせるテーブルを
一から作ると意外と苦戦しますよね
コピペでいつでも作れるようにサンプルを残します

こんな感じで動くよ

サンプルソース
実行結果の確認
初心者向けおすすめ書籍をご紹介！
未経験からエンジニアへ転職しよう！
1. マイナビジョブ20's

サンプルソース

ポイント

ヘッダとデータでtableを分けている
JavaScriptスクロール位置の同期化
Class属性を追加することで動作可能

<style type="text/css">
/** ヘッダ */
.div-head {
    width: 623px;
    overflow-x: hidden;
}
.tbl-head thead ,tbody {
    width: 620px;
    overflow-x: hidden;
}
.tbl-head th ,td {
  width: 200px;
  min-width: 196px;
  padding: 10px 0;
}

/** データ */
.div-data {
    width: 640px;
    height: 153px;
    overflow-x: scroll;
    overflow-y: scroll;
}
.tbl-data tbody {
  overflow-x: hidden;
}
.tbl-data th ,td {
  width: 200px;
  min-width: 200px;
  padding: 10px 0;
  text-align: center;
}
/** テーブルデザイン */
.tbl-head {
  background-color: #eee
}
.tbl-data {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.tbl-data tr:nth-child(even) {
  background-color: #eee
}

</style>
<body>
	<div class="div-head">
		<table class="tbl-head">
			<thead>
				<tr>
					<th>A</th>
					<th>B</th>
					<th>C</th>
					<th>D</th>
					<th>E</th>
				</tr>
			</thead>
		</table>
	</div>
	<div class="div-data">
		<table id ="tbl-data" class="tbl-data">
		</table>
	</div>
	<script type="text/javascript">
	initTable();
	initScroll();
	    function initScroll() {
	    	$('.div-data').scroll(function(e) {
	            $('.div-head').scrollLeft($(this).scrollLeft()); // 右上のDIVのスクロール位置を更新
	        });
	    }

	    function initTable() {
			var htmlstr = '';
			// 行数
	    	for (var rowCnt=0; rowCnt<4; rowCnt++) {
				htmlstr += '<tr>';
				//セル数
		    	for (var cellCnt=0; cellCnt<5; cellCnt++) {
			    	 htmlstr += '<td>' + cellCnt + '</td>';
		    	}
		    	 htmlstr += '</tr>';
			}
			//データ部のテーブルへ追加
			$('#tbl-data').append(htmlstr);
	    }
	</script>
</body>

/** ヘッダ */

.div-head {

width: 623px;

overflow-x: hidden;

}

.tbl-head thead ,tbody {

width: 620px;

overflow-x: hidden;

}

.tbl-head th ,td {

width: 200px;

min-width: 196px;

padding: 10px 0;

}

/** データ */

.div-data {

width: 640px;

height: 153px;

overflow-x: scroll;

overflow-y: scroll;

}

.tbl-data tbody {

overflow-x: hidden;

}

.tbl-data th ,td {

width: 200px;

min-width: 200px;

padding: 10px 0;

text-align: center;

}

/** テーブルデザイン */

.tbl-head {

background-color: #eee

}

.tbl-data {

width: 100%;

border-collapse: collapse;

border-spacing: 0;

}

.tbl-data tr:nth-child(even) {

background-color: #eee

}

</style>

<body>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

</table>

</div>

initTable();

initScroll();

function initScroll() {

$('.div-data').scroll(function(e) {

$('.div-head').scrollLeft($(this).scrollLeft()); // 右上のDIVのスクロール位置を更新

});

}

function initTable() {

var htmlstr = '';

// 行数

for (var rowCnt=0; rowCnt<4; rowCnt++) {

htmlstr += '<tr>';

//セル数

for (var cellCnt=0; cellCnt<5; cellCnt++) {

htmlstr += '<td>' + cellCnt + '</td>';

}

htmlstr += '</tr>';

}

//データ部のテーブルへ追加

$('#tbl-data').append(htmlstr);

}

</script>

</body>

Class属性一覧

ヘッダ用のテーブルを囲むdiv	div-head
ヘッダ用のテーブル	tbl-head
データ用のテーブルを囲むdivタグ	div-data
データ用のテーブル	tbl-data

プログラム解説

initScroll関数でデータ部の横スクロールイベント発生時に
ヘッダ部の横スクロール位置を同期

initTable関数でデータ部のテーブルへ1行づつHTMLを組み込んで
テーブルを作成

実行結果の確認

デモページで、実際の動きを確認できます

初心者向けおすすめ書籍をご紹介！

jQueryの基本的なところから学びたい人向け

リンク

プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です

リンク

Kindle Unlimitedなら無料で読めます
初回登録、30日間無料！

Kindle Unlimitedを30日間無料体験する

未経験からエンジニアへ転職しよう！

プログラマー・ITエンジニア等の人材は、不足しています

プログラマの単価(1月の金額)は60～80万円が相場です

スマホの普及、IoT社会の発展によりプログラマの需要は今後も高いでしょう

未経験からでもプログラマーへの転職を目指すのは大いにありです

転職活動自体は、リスクゼロなので、まずは転職サイトに登録して

どんな転職先があるのか調べていくことを進めていくことをおすすめします

おすすめの転職サイト
マイナビジョブ20's

マイナビジョブ20's

マイナビジョブ20’sは、20代の転職を専門とする転職エージェントです

精通したキャリアアドバイザーから、最適な会社を提案してもらえます

カウンセリング、書類添削等就職活動を手厚くサポート！

20代・第二新卒・既卒の転職ならマイナビジョブ20's！！

・20代の転職を専門とする転職エージェント
・転職活動をしっかりサポート
・サービス利用料は￥0