cman.jp > パーツ作成メニュー > 表のデザイン > tableヘッダーの固定

HTMLのtableヘッダー（行・列）をExcelのように固定する

htmlで表を作成する場合はテーブルタグ「table」を使用しますが、tableにはExcelのような行固定や列固定のヘッダー制御がありません。
当ページでは、tableタグで行ヘッダーと列ヘッダーを固定にしてスクロールするサンプルを掲載しています。

セルを結合している場合はJavaScriptを改造してご利用ください。

表(table)のヘッダーを固定して見よう！

このサンプルは、行または列を「表示／非表示」することでスクロールしています。スクロースバーもサンプル内で作成していますので、スクロールバーの幅変更などもできます。

見出し	列1	列2	列3	列4	列5	列6	列7	列8	列9	列10
行1	あいう	かきくけこ	さしすせ	たちつてとｘｘ	なにぬねの	はひふ	まみむめも	やゆよ	らりるれろ	わをん
行2	1	2	3	4	5	6	7	8	9	10
行3	a	b xxx	c	d	e	f	g	h	i	j
行4	k	l	m	n	o	p	q	r	s	t
行5	u	v	w	x	y	z	-	-	-	-
行6	A	B	C	D	E	F	G	H	I	J
行7	K	L	M	N	O	P	Q	R	S	T
行8	U	V	W	X	Y	Z	-	-	-	-

使用したhtml

<!--- table --->
<div id="tableArea">
 
  <!--- ここに表示するtableを指定してください --->
  <table id="sampleTable">
    <tr><th>見出し</th><th>列1</th><th>列2</th><th>列3</th><th>列4</th><th>列5</th><th>列6</th><th>列7</th><th>列8</th><th>列9</th><th>列10</th></tr>
    <tr><th>行1</th><td>あいう</td><td>かきくけこ</td><td>さしすせ</td><td>たちつてとｘｘ</td><td>なにぬねの</td><td>はひふ</td><td>まみむめも</td><td>やゆよ</td><td>らりるれろ</td><td>わをん</td></tr>
    <tr><th>行2</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
    <tr><th>行3</th><td>a</td><td>b<br>xxx</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td></tr>
    <tr><th>行4</th><td>k</td><td>l</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td><td>r</td><td>s</td><td>t</td></tr>
    <tr><th>行5</th><td>u</td><td>v</td><td>w</td><td>x</td><td>y</td><td>z</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
    <tr><th>行6</th><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
    <tr><th>行7</th><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
    <tr><th>行8</th><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td><td>Z</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
  </table>
 
  <!--- スクロールバー --->
  <div class="sBar" id="sNone"></div>
  <div class="sBar" id="sDOWN"  onmousedown="sMouse('U')" onmouseup="sStop()" onmouseout="sStop()"></div>
  <div class="sBar" id="sUP"    onmousedown="sMouse('D')" onmouseup="sStop()" onmouseout="sStop()"></div>
  <div class="sBar" id="sRIGHT" onmousedown="sMouse('L')" onmouseup="sStop()" onmouseout="sStop()"></div>
  <div class="sBar" id="sLEFT"  onmousedown="sMouse('R')" onmouseup="sStop()" onmouseout="sStop()"></div>
  <!--- スクロールバーー隅の三角マーク --->
  <svg class="sImg" id="iDOWN"  onmousedown="sMouse('U')" onmouseup="sStop()" onmouseout="sStop()"><path d="M0  0 L10  0 L5   7 Z" style="fill:#777"/></svg>
  <svg class="sImg" id="iUP"    onmousedown="sMouse('D')" onmouseup="sStop()" onmouseout="sStop()"><path d="M5  3 L0  10 L10 10 Z" style="fill:#777"/></svg>
  <svg class="sImg" id="iRIGHT" onmousedown="sMouse('L')" onmouseup="sStop()" onmouseout="sStop()"><path d="M0  0 L7   5 L0  10 Z" style="fill:#777"/></svg>
  <svg class="sImg" id="iLEFT"  onmousedown="sMouse('R')" onmouseup="sStop()" onmouseout="sStop()"><path d="M10 0 L3   5 L10 10 Z" style="fill:#777"/></svg>
</div>

生成したCSS

<style type="text/css">
/* === テーブル表示するエリア ============= */
#tableArea {
  position   : relative;
  max-width  : 450px;
  height     : 220px;
  margin     : auto;
  overflow   : hidden;
  background : #ffffff;
  border     : 1px solid #ccc;
}
/* === スクロールバー ===================== */
#tableArea .sBar{
                /* 共通     */
  box-sizing : border-box;
  position   : absolute;
  background : #eee;
  border     : 1px solid #999;
}
.sBar#sNone{                    /* 右下：空 */
  width      : 20px;
  height     : 20px;
  bottom     : 0;
  right      : 0;
  background : #fff;
  border     : none;
}
.sBar#sUP{                      /* 上下：上 */
  width      : 20px;
  top        : 0;
  right      : 0;
  height     : 25px;
  border-bottom-width : 5px;
}
.sBar#sDOWN{                    /* 上下：下 */
  width      : 20px;
  top        : 0;
  bottom     : 20px;
  right      : 0;
}
.sBar#sLEFT{                    /* 左右：左 */
  height     : 20px;
  bottom     : 0;
  left       : 0;
  width      : 25px;
  border-right-width : 5px;
}
.sBar#sRIGHT{                   /* 左右：右 */
  height     : 20px;
  bottom     : 0;
  right      : 20px;
  left       : 20px;
}
/* === スクロールの三角マーク位置合わせ === */
.sImg{                          /* 共通     */
  display    : block;
  position   : absolute;
  width      : 10px;
  height     : 10px;
}
.sImg#iUP{                      /* 上下：上 */
  top        : 5px;
  right      : 5px;
}
.sImg#iDOWN{                    /* 上下：下 */
  bottom     : 25px;
  right      : 5px;
}
.sImg#iLEFT{                    /* 左右：左 */
  bottom     : 5px;
  left       : 5px;
}
.sImg#iRIGHT{                   /* 左右：右 */
  bottom     : 5px;
  right      : 25px;
}
 /* --- （参考）表示テーブルのスタイル指定 ------- */
#sampleTable {
  border-collapse: collapse;         /* 境界線結合 */
  border-spacing : 0;                /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
}
 /* --- ヘッダーのスタイル指定 ------------------- */
#sampleTable th {
  text-align    : center;            /* 文字位置   */
  font-weight   : bold;              /* 太文字     */
  padding       : 6px 5px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  background    : #99ccff;           /* 背景色     */
  white-space   : nowrap;
}
 /* --- 明細のスタイル指定 ----------------------- */
#sampleTable td {
  text-align    : center;            /* 文字位置   */
  padding       : 6px 5px;           /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  white-space   : nowrap;
}
 /* --- 明細のｎ行スタイル指定 ------------------- */
#sampleTable tr:nth-child(3n+1) {
  background    : rgba(89, 179, 0, 0.2); /* 背景色 */
}
</style>

生成したJavaScript

<script type="text/javascript">
var gTimer;
var gFixRow   = 1;                      // ← 固定する行数
var gFixCol   = 1;                      // ← 固定する列数
var gTabldID  = 'sampleTable';          // テーブル表示のエリアのID
var gAreaID   = 'tableArea';            // スクロールするテーブルのID
var gNowRow   = gFixRow;
var gNowCol   = gFixCol;
var gWidthCol = [];
var gMouseCnt = 0;
window.onload = function() {
  var wArea   = document.getElementById(gAreaID);
  var wTABLE = document.getElementById(gTabldID);
  var wTR    = wTABLE.rows;
  var wTD    = wTR[0].cells;
  //-----------------------------------------------------------
  //  横スライド時に高さ固定のため1行目の各セルにheightを設定
  //-----------------------------------------------------------
  for(var i=0; i < wTR.length; i++){
    wTR[i].cells[0].style.boxSizing = "border-box";
    wTR[i].cells[0].style.height    = (wTR[i].clientHeight + 1) + 'px'; // 「1」はborder幅
  }
  //-----------------------------------------------------------
  //  縦スライド時に幅固定のため1行目の各セルにwidthを設定
  //-----------------------------------------------------------
  for(var i=0; i < wTD.length; i++){
    wTD[i].style.boxSizing = "border-box";
    gWidthCol[i]           = (wTD[i].clientWidth + 1);   // 「1」はborder幅
    wTD[i].style.width     = gWidthCol[i]+ 'px';
  }
  //-----------------------------------------------------------
  //  table幅の固定
  //-----------------------------------------------------------
  wTABLE.style.width       = wTABLE.clientWidth + 'px';
  wTABLE.style.tableLayout = "fixed";
  // ----------------------------------------------------------
  //  ホイールを操作すると実行されるイベント登録
  // ----------------------------------------------------------
  if(window.WheelEvent){
    wArea.addEventListener("wheel" , function (e){
      sWheel(e);
    });
  }
}
function sTable(argUDRL){
  var wArea   = document.getElementById(gAreaID);
  var wTABLE  = document.getElementById(gTabldID);
  var wTR     = wTABLE.rows;
  var wMaxRow = wTR.length - 1;
  var wMaxCol = wTR[0].cells.length - 1;
  switch (argUDRL){
    // ----------------------------------------------------------
    //  上スライド時には、現在表示している1行目を非表示
    // ----------------------------------------------------------
    case 'U':
            if(gNowRow >= wMaxRow){gNowRow = wMaxRow;return;}
            wTR[gNowRow].style.display = "none";
            gNowRow++;
            break;
    // ----------------------------------------------------------
    //  下スライド時には、現在表示している1行目の前行を表示
    // ----------------------------------------------------------
    case 'D':
            if(gNowRow <= gFixRow){gNowRow = gFixRow;return;}
            gNowRow--;
            wTR[gNowRow].style.display = "";
            break;
    // ----------------------------------------------------------
    //  右スライド時には、現在表示している1列目を非表示
    // ----------------------------------------------------------
    case 'L':
            if(gNowCol >= wMaxCol){gNowCol = wMaxCol;return;}
            for(var i=0; i < wTR.length; i++){
                    wTR[i].cells[gNowCol].style.display = "none"
            }
            wTABLE.style.width = parseInt(wTABLE.style.width) - gWidthCol[gNowCol] + 'px';
            gNowCol++;
            break;
    // ----------------------------------------------------------
    //  左スライド時には、現在表示している1列目の前列を表示
    // ----------------------------------------------------------
    case 'R':
            if(gNowCol <= gFixCol){gNowCol = gFixCol;return;}
            gNowCol--;
            for(var i=0; i < wTR.length; i++){
                    wTR[i].cells[gNowCol].style.display = ""
            }
            wTABLE.style.width = parseInt(wTABLE.style.width) + gWidthCol[gNowCol] + 'px';
            break;
  }
  switch (argUDRL){
          // ----------------------------------------------------------
          //  縦のスライダの表示位置を変更
          // ----------------------------------------------------------
          case 'U':
          case 'D':
                  var wBarHeight = wArea.clientHeight - ( 20 * 3 ) - 5;                           // 「5」は区切り線幅
                  var wBarUP     = parseInt((gNowRow - gFixRow) / (wMaxRow - gFixRow) * wBarHeight) + 25;
                  document.getElementById('sUP').style.height = wBarUP+'px';
                  break;
          // ----------------------------------------------------------
          //  横のスライダの表示位置を変更
          // ----------------------------------------------------------
          case 'L':
          case 'R':
                  var wBarWidth = wArea.clientWidth - ( 20 * 3 ) - 5;                             // 「5」は区切り線幅
                  var wBarLeft  = parseInt((gNowCol - gFixCol) / (wMaxCol - gFixCol) * wBarWidth) + 25;
                  document.getElementById('sLEFT').style.width = wBarLeft+'px';
                  break;
  }
}
function sStop(){
        if(gTimer){clearTimeout(gTimer);}
        gMouseCnt = 0;
}
function sMouse(argUDRL){
        // ------------------------------------------------------
        //  スクロール実行
        // ------------------------------------------------------
        sTable(argUDRL);
        // ------------------------------------------------------
        //  マウスクリックのままは繰り返し
        // ------------------------------------------------------
        var wTime = 150;                   // 繰り返し間隔
        if(gMouseCnt == 0){wTime = 500;}   // 初回のみ反応を遅く
        if(gTimer){clearTimeout(gTimer);}
        gTimer = setTimeout(function(){sMouse(argUDRL)}, wTime);
        gMouseCnt++;
}
function sWheel(e){
        // ------------------------------------------------------
        //  ホイールの方向でスクロール実行
        // ------------------------------------------------------
        if(e.deltaY < 0){ sTable('D'); }
        if(e.deltaY > 0){ sTable('U'); }
        if(e.deltaX < 0){ sTable('R'); }
        if(e.deltaX > 0){ sTable('L'); }
        // ------------------------------------------------------
        //  ホイールはキャンセル
        // ------------------------------------------------------
        e.preventDefault();
}
</script>

ページTOP

注意事項

表示する表「tabale」のセルが結合している場合、正常に動作しません。JavaScriptを改造してご利用ください。

ページTOP

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？

ページTOP

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧

A	B	C	D
1	2	3	4
5	6	7	8
w	x	y	z

TABLEデザイン

A	B	C	D
1	2	3	4
5	6	7	8
w	x	y	z

カーソル色

A	B	C	D
1	2	3	4
5	6	7	8
w	x	y	z

TABLE
フィルタ

フィルター

A	B	C	D
1	2	3	4
5	6	7	8
w	x	y	z

行列ヘッダ
固定

ヘッダー固定

A	B	C	D
1	2	3	4
5	6	7	8
w	x	y	z

TABLE
列ソート

列の並び替え

A	B	C	D
1	2	3	4
5	6	7	8
w	x	y	z

TABLE
保存

PCに保存

A	B	C	D
1	2	3	4
5		7
	x		z

セルに斜線

A	B	C	D
1	2	3	4
5	6	7	8
w	x	y	z

セル
書き換え

セル書き換え

このページのURL

当サイトについてお問い合わせよくあるご質問

cman.jp サーバ監視【無料】 QRコード作成【無料】画像加工【無料】 htaccess作成【無料】 WEB便利ノート【無料】 IT比較実験【無料】アイコン素材【無料】 WEBページ作成リファレンス【無料】文字/ボタンのイメージ画像作成【無料】

スマートフォン・タブレット

運営:株式会社シーマン