必見！tableタグの見出し（ヘッダ）固定可能！「FixedMidashi」の紹介

・大きいテーブルだとヘッダが見えなくなって、わかりづらい表になってしまう

・複数行の固定がしたい
・行だけでなく、列も固定したい

今回は上記の問題について考えていきます！

システム化する上で、表のみやすさというのはとても重要なポイントとなります。システムというのはなんらかの膨大なデータを集めるだけではないですからね。

蓄積したデータをわかりやすく表示してナンボなんです。

大きい表だとヘッダが見えなくなって、なんのデータかわかりづらいなんてこともしばしばありますよね。

だいぶ前からある（初版: 2012年7月）このライブラリを使うと簡単にヘッダ固定の実装できるので便利です！

サンプルとサンプルソース

サンプル

デモ
1行 1列1行 2列1行 3列1行 4列1行 5列1行 6列1行 7列1行 8列1行 9列1行 10列1行 11列1行 12列1行 13列1行 14列1行 15列1行 16列1行 17列1行 18列1行 19列1行 20列1行 21列1行 22列1行 23列1行 24列1行 25列1行 26列1行 27列1行 28列1行 29列1行 30列1行 31列1行 32列1行 33列1行 34列1行 35列1行 36列1行 37列1行 38列1行 39列1行 40列1行 41列1行 42列1行 43列1行 44列1行 45列1行 46列1行 47列1行 48列1行 49列1行 50列
2行 1列2行 2列2行 3列2行 4列2行 5列2行 6列2行 7列2行 8列2行 9列2行 10列2行 11列2行 12列2行 13列2行 14列2行 15列2行 16列2行 17列2行 18列2行 19列2行 20列2行 21列2行 22列2行 23列2行 24列2行 25列2行 26列2行 27列2行 28列2行 29列2行 30列2行 31列2行 32列2行 33列2行 34列2行 35列2行 36列2行 37列2行 38列2行 39列2行 40列2行 41列2行 42列2行 43列2行 44列2行 45列2行 46列2行 47列2行 48列2行 49列2行 50列
3行 1列3行 2列3行 3列3行 4列3行 5列3行 6列3行 7列3行 8列3行 9列3行 10列3行 11列3行 12列3行 13列3行 14列3行 15列3行 16列3行 17列3行 18列3行 19列3行 20列3行 21列3行 22列3行 23列3行 24列3行 25列3行 26列3行 27列3行 28列3行 29列3行 30列3行 31列3行 32列3行 33列3行 34列3行 35列3行 36列3行 37列3行 38列3行 39列3行 40列3行 41列3行 42列3行 43列3行 44列3行 45列3行 46列3行 47列3行 48列3行 49列3行 50列
4行 1列4行 2列4行 3列4行 4列4行 5列4行 6列4行 7列4行 8列4行 9列4行 10列4行 11列4行 12列4行 13列4行 14列4行 15列4行 16列4行 17列4行 18列4行 19列4行 20列4行 21列4行 22列4行 23列4行 24列4行 25列4行 26列4行 27列4行 28列4行 29列4行 30列4行 31列4行 32列4行 33列4行 34列4行 35列4行 36列4行 37列4行 38列4行 39列4行 40列4行 41列4行 42列4行 43列4行 44列4行 45列4行 46列4行 47列4行 48列4行 49列4行 50列
5行 1列5行 2列5行 3列5行 4列5行 5列5行 6列5行 7列5行 8列5行 9列5行 10列5行 11列5行 12列5行 13列5行 14列5行 15列5行 16列5行 17列5行 18列5行 19列5行 20列5行 21列5行 22列5行 23列5行 24列5行 25列5行 26列5行 27列5行 28列5行 29列5行 30列5行 31列5行 32列5行 33列5行 34列5行 35列5行 36列5行 37列5行 38列5行 39列5行 40列5行 41列5行 42列5行 43列5行 44列5行 45列5行 46列5行 47列5行 48列5行 49列5行 50列
6行 1列6行 2列6行 3列6行 4列6行 5列6行 6列6行 7列6行 8列6行 9列6行 10列6行 11列6行 12列6行 13列6行 14列6行 15列6行 16列6行 17列6行 18列6行 19列6行 20列6行 21列6行 22列6行 23列6行 24列6行 25列6行 26列6行 27列6行 28列6行 29列6行 30列6行 31列6行 32列6行 33列6行 34列6行 35列6行 36列6行 37列6行 38列6行 39列6行 40列6行 41列6行 42列6行 43列6行 44列6行 45列6行 46列6行 47列6行 48列6行 49列6行 50列
7行 1列7行 2列7行 3列7行 4列7行 5列7行 6列7行 7列7行 8列7行 9列7行 10列7行 11列7行 12列7行 13列7行 14列7行 15列7行 16列7行 17列7行 18列7行 19列7行 20列7行 21列7行 22列7行 23列7行 24列7行 25列7行 26列7行 27列7行 28列7行 29列7行 30列7行 31列7行 32列7行 33列7行 34列7行 35列7行 36列7行 37列7行 38列7行 39列7行 40列7行 41列7行 42列7行 43列7行 44列7行 45列7行 46列7行 47列7行 48列7行 49列7行 50列
8行 1列8行 2列8行 3列8行 4列8行 5列8行 6列8行 7列8行 8列8行 9列8行 10列8行 11列8行 12列8行 13列8行 14列8行 15列8行 16列8行 17列8行 18列8行 19列8行 20列8行 21列8行 22列8行 23列8行 24列8行 25列8行 26列8行 27列8行 28列8行 29列8行 30列8行 31列8行 32列8行 33列8行 34列8行 35列8行 36列8行 37列8行 38列8行 39列8行 40列8行 41列8行 42列8行 43列8行 44列8行 45列8行 46列8行 47列8行 48列8行 49列8行 50列
9行 1列9行 2列9行 3列9行 4列9行 5列9行 6列9行 7列9行 8列9行 9列9行 10列9行 11列9行 12列9行 13列9行 14列9行 15列9行 16列9行 17列9行 18列9行 19列9行 20列9行 21列9行 22列9行 23列9行 24列9行 25列9行 26列9行 27列9行 28列9行 29列9行 30列9行 31列9行 32列9行 33列9行 34列9行 35列9行 36列9行 37列9行 38列9行 39列9行 40列9行 41列9行 42列9行 43列9行 44列9行 45列9行 46列9行 47列9行 48列9行 49列9行 50列
10行 1列10行 2列10行 3列10行 4列10行 5列10行 6列10行 7列10行 8列10行 9列10行 10列10行 11列10行 12列10行 13列10行 14列10行 15列10行 16列10行 17列10行 18列10行 19列10行 20列10行 21列10行 22列10行 23列10行 24列10行 25列10行 26列10行 27列10行 28列10行 29列10行 30列10行 31列10行 32列10行 33列10行 34列10行 35列10行 36列10行 37列10行 38列10行 39列10行 40列10行 41列10行 42列10行 43列10行 44列10行 45列10行 46列10行 47列10行 48列10行 49列10行 50列
11行 1列11行 2列11行 3列11行 4列11行 5列11行 6列11行 7列11行 8列11行 9列11行 10列11行 11列11行 12列11行 13列11行 14列11行 15列11行 16列11行 17列11行 18列11行 19列11行 20列11行 21列11行 22列11行 23列11行 24列11行 25列11行 26列11行 27列11行 28列11行 29列11行 30列11行 31列11行 32列11行 33列11行 34列11行 35列11行 36列11行 37列11行 38列11行 39列11行 40列11行 41列11行 42列11行 43列11行 44列11行 45列11行 46列11行 47列11行 48列11行 49列11行 50列
12行 1列12行 2列12行 3列12行 4列12行 5列12行 6列12行 7列12行 8列12行 9列12行 10列12行 11列12行 12列12行 13列12行 14列12行 15列12行 16列12行 17列12行 18列12行 19列12行 20列12行 21列12行 22列12行 23列12行 24列12行 25列12行 26列12行 27列12行 28列12行 29列12行 30列12行 31列12行 32列12行 33列12行 34列12行 35列12行 36列12行 37列12行 38列12行 39列12行 40列12行 41列12行 42列12行 43列12行 44列12行 45列12行 46列12行 47列12行 48列12行 49列12行 50列
13行 1列13行 2列13行 3列13行 4列13行 5列13行 6列13行 7列13行 8列13行 9列13行 10列13行 11列13行 12列13行 13列13行 14列13行 15列13行 16列13行 17列13行 18列13行 19列13行 20列13行 21列13行 22列13行 23列13行 24列13行 25列13行 26列13行 27列13行 28列13行 29列13行 30列13行 31列13行 32列13行 33列13行 34列13行 35列13行 36列13行 37列13行 38列13行 39列13行 40列13行 41列13行 42列13行 43列13行 44列13行 45列13行 46列13行 47列13行 48列13行 49列13行 50列
14行 1列14行 2列14行 3列14行 4列14行 5列14行 6列14行 7列14行 8列14行 9列14行 10列14行 11列14行 12列14行 13列14行 14列14行 15列14行 16列14行 17列14行 18列14行 19列14行 20列14行 21列14行 22列14行 23列14行 24列14行 25列14行 26列14行 27列14行 28列14行 29列14行 30列14行 31列14行 32列14行 33列14行 34列14行 35列14行 36列14行 37列14行 38列14行 39列14行 40列14行 41列14行 42列14行 43列14行 44列14行 45列14行 46列14行 47列14行 48列14行 49列14行 50列
15行 1列15行 2列15行 3列15行 4列15行 5列15行 6列15行 7列15行 8列15行 9列15行 10列15行 11列15行 12列15行 13列15行 14列15行 15列15行 16列15行 17列15行 18列15行 19列15行 20列15行 21列15行 22列15行 23列15行 24列15行 25列15行 26列15行 27列15行 28列15行 29列15行 30列15行 31列15行 32列15行 33列15行 34列15行 35列15行 36列15行 37列15行 38列15行 39列15行 40列15行 41列15行 42列15行 43列15行 44列15行 45列15行 46列15行 47列15行 48列15行 49列15行 50列
16行 1列16行 2列16行 3列16行 4列16行 5列16行 6列16行 7列16行 8列16行 9列16行 10列16行 11列16行 12列16行 13列16行 14列16行 15列16行 16列16行 17列16行 18列16行 19列16行 20列16行 21列16行 22列16行 23列16行 24列16行 25列16行 26列16行 27列16行 28列16行 29列16行 30列16行 31列16行 32列16行 33列16行 34列16行 35列16行 36列16行 37列16行 38列16行 39列16行 40列16行 41列16行 42列16行 43列16行 44列16行 45列16行 46列16行 47列16行 48列16行 49列16行 50列
17行 1列17行 2列17行 3列17行 4列17行 5列17行 6列17行 7列17行 8列17行 9列17行 10列17行 11列17行 12列17行 13列17行 14列17行 15列17行 16列17行 17列17行 18列17行 19列17行 20列17行 21列17行 22列17行 23列17行 24列17行 25列17行 26列17行 27列17行 28列17行 29列17行 30列17行 31列17行 32列17行 33列17行 34列17行 35列17行 36列17行 37列17行 38列17行 39列17行 40列17行 41列17行 42列17行 43列17行 44列17行 45列17行 46列17行 47列17行 48列17行 49列17行 50列
18行 1列18行 2列18行 3列18行 4列18行 5列18行 6列18行 7列18行 8列18行 9列18行 10列18行 11列18行 12列18行 13列18行 14列18行 15列18行 16列18行 17列18行 18列18行 19列18行 20列18行 21列18行 22列18行 23列18行 24列18行 25列18行 26列18行 27列18行 28列18行 29列18行 30列18行 31列18行 32列18行 33列18行 34列18行 35列18行 36列18行 37列18行 38列18行 39列18行 40列18行 41列18行 42列18行 43列18行 44列18行 45列18行 46列18行 47列18行 48列18行 49列18行 50列
19行 1列19行 2列19行 3列19行 4列19行 5列19行 6列19行 7列19行 8列19行 9列19行 10列19行 11列19行 12列19行 13列19行 14列19行 15列19行 16列19行 17列19行 18列19行 19列19行 20列19行 21列19行 22列19行 23列19行 24列19行 25列19行 26列19行 27列19行 28列19行 29列19行 30列19行 31列19行 32列19行 33列19行 34列19行 35列19行 36列19行 37列19行 38列19行 39列19行 40列19行 41列19行 42列19行 43列19行 44列19行 45列19行 46列19行 47列19行 48列19行 49列19行 50列
20行 1列20行 2列20行 3列20行 4列20行 5列20行 6列20行 7列20行 8列20行 9列20行 10列20行 11列20行 12列20行 13列20行 14列20行 15列20行 16列20行 17列20行 18列20行 19列20行 20列20行 21列20行 22列20行 23列20行 24列20行 25列20行 26列20行 27列20行 28列20行 29列20行 30列20行 31列20行 32列20行 33列20行 34列20行 35列20行 36列20行 37列20行 38列20行 39列20行 40列20行 41列20行 42列20行 43列20行 44列20行 45列20行 46列20行 47列20行 48列20行 49列20行 50列

空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！

サンプルソース

ライブラリは自分でダウンロードして読み込ませてください。（「公式からダウンロードしてね」の部分です）

HTML / JavaScript / jQuery / css 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>

  <!--    [必須ではない]jQuery・bootstrapライブラリ読み込み -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--   /[必須ではない]jQuery・bootstrapライブラリ読み込み -->

  <!--  公式からダウンロードしてね -->
  <script src="https://appsol-one.com/custom/fixed_midashi/fixed_midashi.js"></script>
  <!--  /公式からダウンロードしてね -->

</head>
<body>


<div class="scroll_div m-5" style="width:95%; height:500px;" >
 <table _fixedhead="rows:1;cols:2"  class=" border table text-center table-striped "  >
   <tr class="bg-secondary text-light "><td>1行 1列</td><td class="bg-secondary text-light ">1行 2列</td><td>1行 3列</td><td>1行 4列</td><td>1行 5列</td><td>1行 6列</td><td>1行 7列</td><td>1行 8列</td><td>1行 9列</td><td>1行 10列</td><td>1行 11列</td><td>1行 12列</td><td>1行 13列</td><td>1行 14列</td><td>1行 15列</td><td>1行 16列</td><td>1行 17列</td><td>1行 18列</td><td>1行 19列</td><td>1行 20列</td><td>1行 21列</td><td>1行 22列</td><td>1行 23列</td><td>1行 24列</td><td>1行 25列</td><td>1行 26列</td><td>1行 27列</td><td>1行 28列</td><td>1行 29列</td><td>1行 30列</td><td>1行 31列</td><td>1行 32列</td><td>1行 33列</td><td>1行 34列</td><td>1行 35列</td><td>1行 36列</td><td>1行 37列</td><td>1行 38列</td><td>1行 39列</td><td>1行 40列</td><td>1行 41列</td><td>1行 42列</td><td>1行 43列</td><td>1行 44列</td><td>1行 45列</td><td>1行 46列</td><td>1行 47列</td><td>1行 48列</td><td>1行 49列</td><td>1行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">2行 1列</td><td class="bg-secondary text-light ">2行 2列</td><td>2行 3列</td><td>2行 4列</td><td>2行 5列</td><td>2行 6列</td><td>2行 7列</td><td>2行 8列</td><td>2行 9列</td><td>2行 10列</td><td>2行 11列</td><td>2行 12列</td><td>2行 13列</td><td>2行 14列</td><td>2行 15列</td><td>2行 16列</td><td>2行 17列</td><td>2行 18列</td><td>2行 19列</td><td>2行 20列</td><td>2行 21列</td><td>2行 22列</td><td>2行 23列</td><td>2行 24列</td><td>2行 25列</td><td>2行 26列</td><td>2行 27列</td><td>2行 28列</td><td>2行 29列</td><td>2行 30列</td><td>2行 31列</td><td>2行 32列</td><td>2行 33列</td><td>2行 34列</td><td>2行 35列</td><td>2行 36列</td><td>2行 37列</td><td>2行 38列</td><td>2行 39列</td><td>2行 40列</td><td>2行 41列</td><td>2行 42列</td><td>2行 43列</td><td>2行 44列</td><td>2行 45列</td><td>2行 46列</td><td>2行 47列</td><td>2行 48列</td><td>2行 49列</td><td>2行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">3行 1列</td><td class="bg-secondary text-light ">3行 2列</td><td>3行 3列</td><td>3行 4列</td><td>3行 5列</td><td>3行 6列</td><td>3行 7列</td><td>3行 8列</td><td>3行 9列</td><td>3行 10列</td><td>3行 11列</td><td>3行 12列</td><td>3行 13列</td><td>3行 14列</td><td>3行 15列</td><td>3行 16列</td><td>3行 17列</td><td>3行 18列</td><td>3行 19列</td><td>3行 20列</td><td>3行 21列</td><td>3行 22列</td><td>3行 23列</td><td>3行 24列</td><td>3行 25列</td><td>3行 26列</td><td>3行 27列</td><td>3行 28列</td><td>3行 29列</td><td>3行 30列</td><td>3行 31列</td><td>3行 32列</td><td>3行 33列</td><td>3行 34列</td><td>3行 35列</td><td>3行 36列</td><td>3行 37列</td><td>3行 38列</td><td>3行 39列</td><td>3行 40列</td><td>3行 41列</td><td>3行 42列</td><td>3行 43列</td><td>3行 44列</td><td>3行 45列</td><td>3行 46列</td><td>3行 47列</td><td>3行 48列</td><td>3行 49列</td><td>3行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">4行 1列</td><td class="bg-secondary text-light ">4行 2列</td><td>4行 3列</td><td>4行 4列</td><td>4行 5列</td><td>4行 6列</td><td>4行 7列</td><td>4行 8列</td><td>4行 9列</td><td>4行 10列</td><td>4行 11列</td><td>4行 12列</td><td>4行 13列</td><td>4行 14列</td><td>4行 15列</td><td>4行 16列</td><td>4行 17列</td><td>4行 18列</td><td>4行 19列</td><td>4行 20列</td><td>4行 21列</td><td>4行 22列</td><td>4行 23列</td><td>4行 24列</td><td>4行 25列</td><td>4行 26列</td><td>4行 27列</td><td>4行 28列</td><td>4行 29列</td><td>4行 30列</td><td>4行 31列</td><td>4行 32列</td><td>4行 33列</td><td>4行 34列</td><td>4行 35列</td><td>4行 36列</td><td>4行 37列</td><td>4行 38列</td><td>4行 39列</td><td>4行 40列</td><td>4行 41列</td><td>4行 42列</td><td>4行 43列</td><td>4行 44列</td><td>4行 45列</td><td>4行 46列</td><td>4行 47列</td><td>4行 48列</td><td>4行 49列</td><td>4行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">5行 1列</td><td class="bg-secondary text-light ">5行 2列</td><td>5行 3列</td><td>5行 4列</td><td>5行 5列</td><td>5行 6列</td><td>5行 7列</td><td>5行 8列</td><td>5行 9列</td><td>5行 10列</td><td>5行 11列</td><td>5行 12列</td><td>5行 13列</td><td>5行 14列</td><td>5行 15列</td><td>5行 16列</td><td>5行 17列</td><td>5行 18列</td><td>5行 19列</td><td>5行 20列</td><td>5行 21列</td><td>5行 22列</td><td>5行 23列</td><td>5行 24列</td><td>5行 25列</td><td>5行 26列</td><td>5行 27列</td><td>5行 28列</td><td>5行 29列</td><td>5行 30列</td><td>5行 31列</td><td>5行 32列</td><td>5行 33列</td><td>5行 34列</td><td>5行 35列</td><td>5行 36列</td><td>5行 37列</td><td>5行 38列</td><td>5行 39列</td><td>5行 40列</td><td>5行 41列</td><td>5行 42列</td><td>5行 43列</td><td>5行 44列</td><td>5行 45列</td><td>5行 46列</td><td>5行 47列</td><td>5行 48列</td><td>5行 49列</td><td>5行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">6行 1列</td><td class="bg-secondary text-light ">6行 2列</td><td>6行 3列</td><td>6行 4列</td><td>6行 5列</td><td>6行 6列</td><td>6行 7列</td><td>6行 8列</td><td>6行 9列</td><td>6行 10列</td><td>6行 11列</td><td>6行 12列</td><td>6行 13列</td><td>6行 14列</td><td>6行 15列</td><td>6行 16列</td><td>6行 17列</td><td>6行 18列</td><td>6行 19列</td><td>6行 20列</td><td>6行 21列</td><td>6行 22列</td><td>6行 23列</td><td>6行 24列</td><td>6行 25列</td><td>6行 26列</td><td>6行 27列</td><td>6行 28列</td><td>6行 29列</td><td>6行 30列</td><td>6行 31列</td><td>6行 32列</td><td>6行 33列</td><td>6行 34列</td><td>6行 35列</td><td>6行 36列</td><td>6行 37列</td><td>6行 38列</td><td>6行 39列</td><td>6行 40列</td><td>6行 41列</td><td>6行 42列</td><td>6行 43列</td><td>6行 44列</td><td>6行 45列</td><td>6行 46列</td><td>6行 47列</td><td>6行 48列</td><td>6行 49列</td><td>6行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">7行 1列</td><td class="bg-secondary text-light ">7行 2列</td><td>7行 3列</td><td>7行 4列</td><td>7行 5列</td><td>7行 6列</td><td>7行 7列</td><td>7行 8列</td><td>7行 9列</td><td>7行 10列</td><td>7行 11列</td><td>7行 12列</td><td>7行 13列</td><td>7行 14列</td><td>7行 15列</td><td>7行 16列</td><td>7行 17列</td><td>7行 18列</td><td>7行 19列</td><td>7行 20列</td><td>7行 21列</td><td>7行 22列</td><td>7行 23列</td><td>7行 24列</td><td>7行 25列</td><td>7行 26列</td><td>7行 27列</td><td>7行 28列</td><td>7行 29列</td><td>7行 30列</td><td>7行 31列</td><td>7行 32列</td><td>7行 33列</td><td>7行 34列</td><td>7行 35列</td><td>7行 36列</td><td>7行 37列</td><td>7行 38列</td><td>7行 39列</td><td>7行 40列</td><td>7行 41列</td><td>7行 42列</td><td>7行 43列</td><td>7行 44列</td><td>7行 45列</td><td>7行 46列</td><td>7行 47列</td><td>7行 48列</td><td>7行 49列</td><td>7行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">8行 1列</td><td class="bg-secondary text-light ">8行 2列</td><td>8行 3列</td><td>8行 4列</td><td>8行 5列</td><td>8行 6列</td><td>8行 7列</td><td>8行 8列</td><td>8行 9列</td><td>8行 10列</td><td>8行 11列</td><td>8行 12列</td><td>8行 13列</td><td>8行 14列</td><td>8行 15列</td><td>8行 16列</td><td>8行 17列</td><td>8行 18列</td><td>8行 19列</td><td>8行 20列</td><td>8行 21列</td><td>8行 22列</td><td>8行 23列</td><td>8行 24列</td><td>8行 25列</td><td>8行 26列</td><td>8行 27列</td><td>8行 28列</td><td>8行 29列</td><td>8行 30列</td><td>8行 31列</td><td>8行 32列</td><td>8行 33列</td><td>8行 34列</td><td>8行 35列</td><td>8行 36列</td><td>8行 37列</td><td>8行 38列</td><td>8行 39列</td><td>8行 40列</td><td>8行 41列</td><td>8行 42列</td><td>8行 43列</td><td>8行 44列</td><td>8行 45列</td><td>8行 46列</td><td>8行 47列</td><td>8行 48列</td><td>8行 49列</td><td>8行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">9行 1列</td><td class="bg-secondary text-light ">9行 2列</td><td>9行 3列</td><td>9行 4列</td><td>9行 5列</td><td>9行 6列</td><td>9行 7列</td><td>9行 8列</td><td>9行 9列</td><td>9行 10列</td><td>9行 11列</td><td>9行 12列</td><td>9行 13列</td><td>9行 14列</td><td>9行 15列</td><td>9行 16列</td><td>9行 17列</td><td>9行 18列</td><td>9行 19列</td><td>9行 20列</td><td>9行 21列</td><td>9行 22列</td><td>9行 23列</td><td>9行 24列</td><td>9行 25列</td><td>9行 26列</td><td>9行 27列</td><td>9行 28列</td><td>9行 29列</td><td>9行 30列</td><td>9行 31列</td><td>9行 32列</td><td>9行 33列</td><td>9行 34列</td><td>9行 35列</td><td>9行 36列</td><td>9行 37列</td><td>9行 38列</td><td>9行 39列</td><td>9行 40列</td><td>9行 41列</td><td>9行 42列</td><td>9行 43列</td><td>9行 44列</td><td>9行 45列</td><td>9行 46列</td><td>9行 47列</td><td>9行 48列</td><td>9行 49列</td><td>9行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">10行 1列</td><td class="bg-secondary text-light ">10行 2列</td><td>10行 3列</td><td>10行 4列</td><td>10行 5列</td><td>10行 6列</td><td>10行 7列</td><td>10行 8列</td><td>10行 9列</td><td>10行 10列</td><td>10行 11列</td><td>10行 12列</td><td>10行 13列</td><td>10行 14列</td><td>10行 15列</td><td>10行 16列</td><td>10行 17列</td><td>10行 18列</td><td>10行 19列</td><td>10行 20列</td><td>10行 21列</td><td>10行 22列</td><td>10行 23列</td><td>10行 24列</td><td>10行 25列</td><td>10行 26列</td><td>10行 27列</td><td>10行 28列</td><td>10行 29列</td><td>10行 30列</td><td>10行 31列</td><td>10行 32列</td><td>10行 33列</td><td>10行 34列</td><td>10行 35列</td><td>10行 36列</td><td>10行 37列</td><td>10行 38列</td><td>10行 39列</td><td>10行 40列</td><td>10行 41列</td><td>10行 42列</td><td>10行 43列</td><td>10行 44列</td><td>10行 45列</td><td>10行 46列</td><td>10行 47列</td><td>10行 48列</td><td>10行 49列</td><td>10行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">11行 1列</td><td class="bg-secondary text-light ">11行 2列</td><td>11行 3列</td><td>11行 4列</td><td>11行 5列</td><td>11行 6列</td><td>11行 7列</td><td>11行 8列</td><td>11行 9列</td><td>11行 10列</td><td>11行 11列</td><td>11行 12列</td><td>11行 13列</td><td>11行 14列</td><td>11行 15列</td><td>11行 16列</td><td>11行 17列</td><td>11行 18列</td><td>11行 19列</td><td>11行 20列</td><td>11行 21列</td><td>11行 22列</td><td>11行 23列</td><td>11行 24列</td><td>11行 25列</td><td>11行 26列</td><td>11行 27列</td><td>11行 28列</td><td>11行 29列</td><td>11行 30列</td><td>11行 31列</td><td>11行 32列</td><td>11行 33列</td><td>11行 34列</td><td>11行 35列</td><td>11行 36列</td><td>11行 37列</td><td>11行 38列</td><td>11行 39列</td><td>11行 40列</td><td>11行 41列</td><td>11行 42列</td><td>11行 43列</td><td>11行 44列</td><td>11行 45列</td><td>11行 46列</td><td>11行 47列</td><td>11行 48列</td><td>11行 49列</td><td>11行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">12行 1列</td><td class="bg-secondary text-light ">12行 2列</td><td>12行 3列</td><td>12行 4列</td><td>12行 5列</td><td>12行 6列</td><td>12行 7列</td><td>12行 8列</td><td>12行 9列</td><td>12行 10列</td><td>12行 11列</td><td>12行 12列</td><td>12行 13列</td><td>12行 14列</td><td>12行 15列</td><td>12行 16列</td><td>12行 17列</td><td>12行 18列</td><td>12行 19列</td><td>12行 20列</td><td>12行 21列</td><td>12行 22列</td><td>12行 23列</td><td>12行 24列</td><td>12行 25列</td><td>12行 26列</td><td>12行 27列</td><td>12行 28列</td><td>12行 29列</td><td>12行 30列</td><td>12行 31列</td><td>12行 32列</td><td>12行 33列</td><td>12行 34列</td><td>12行 35列</td><td>12行 36列</td><td>12行 37列</td><td>12行 38列</td><td>12行 39列</td><td>12行 40列</td><td>12行 41列</td><td>12行 42列</td><td>12行 43列</td><td>12行 44列</td><td>12行 45列</td><td>12行 46列</td><td>12行 47列</td><td>12行 48列</td><td>12行 49列</td><td>12行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">13行 1列</td><td class="bg-secondary text-light ">13行 2列</td><td>13行 3列</td><td>13行 4列</td><td>13行 5列</td><td>13行 6列</td><td>13行 7列</td><td>13行 8列</td><td>13行 9列</td><td>13行 10列</td><td>13行 11列</td><td>13行 12列</td><td>13行 13列</td><td>13行 14列</td><td>13行 15列</td><td>13行 16列</td><td>13行 17列</td><td>13行 18列</td><td>13行 19列</td><td>13行 20列</td><td>13行 21列</td><td>13行 22列</td><td>13行 23列</td><td>13行 24列</td><td>13行 25列</td><td>13行 26列</td><td>13行 27列</td><td>13行 28列</td><td>13行 29列</td><td>13行 30列</td><td>13行 31列</td><td>13行 32列</td><td>13行 33列</td><td>13行 34列</td><td>13行 35列</td><td>13行 36列</td><td>13行 37列</td><td>13行 38列</td><td>13行 39列</td><td>13行 40列</td><td>13行 41列</td><td>13行 42列</td><td>13行 43列</td><td>13行 44列</td><td>13行 45列</td><td>13行 46列</td><td>13行 47列</td><td>13行 48列</td><td>13行 49列</td><td>13行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">14行 1列</td><td class="bg-secondary text-light ">14行 2列</td><td>14行 3列</td><td>14行 4列</td><td>14行 5列</td><td>14行 6列</td><td>14行 7列</td><td>14行 8列</td><td>14行 9列</td><td>14行 10列</td><td>14行 11列</td><td>14行 12列</td><td>14行 13列</td><td>14行 14列</td><td>14行 15列</td><td>14行 16列</td><td>14行 17列</td><td>14行 18列</td><td>14行 19列</td><td>14行 20列</td><td>14行 21列</td><td>14行 22列</td><td>14行 23列</td><td>14行 24列</td><td>14行 25列</td><td>14行 26列</td><td>14行 27列</td><td>14行 28列</td><td>14行 29列</td><td>14行 30列</td><td>14行 31列</td><td>14行 32列</td><td>14行 33列</td><td>14行 34列</td><td>14行 35列</td><td>14行 36列</td><td>14行 37列</td><td>14行 38列</td><td>14行 39列</td><td>14行 40列</td><td>14行 41列</td><td>14行 42列</td><td>14行 43列</td><td>14行 44列</td><td>14行 45列</td><td>14行 46列</td><td>14行 47列</td><td>14行 48列</td><td>14行 49列</td><td>14行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">15行 1列</td><td class="bg-secondary text-light ">15行 2列</td><td>15行 3列</td><td>15行 4列</td><td>15行 5列</td><td>15行 6列</td><td>15行 7列</td><td>15行 8列</td><td>15行 9列</td><td>15行 10列</td><td>15行 11列</td><td>15行 12列</td><td>15行 13列</td><td>15行 14列</td><td>15行 15列</td><td>15行 16列</td><td>15行 17列</td><td>15行 18列</td><td>15行 19列</td><td>15行 20列</td><td>15行 21列</td><td>15行 22列</td><td>15行 23列</td><td>15行 24列</td><td>15行 25列</td><td>15行 26列</td><td>15行 27列</td><td>15行 28列</td><td>15行 29列</td><td>15行 30列</td><td>15行 31列</td><td>15行 32列</td><td>15行 33列</td><td>15行 34列</td><td>15行 35列</td><td>15行 36列</td><td>15行 37列</td><td>15行 38列</td><td>15行 39列</td><td>15行 40列</td><td>15行 41列</td><td>15行 42列</td><td>15行 43列</td><td>15行 44列</td><td>15行 45列</td><td>15行 46列</td><td>15行 47列</td><td>15行 48列</td><td>15行 49列</td><td>15行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">16行 1列</td><td class="bg-secondary text-light ">16行 2列</td><td>16行 3列</td><td>16行 4列</td><td>16行 5列</td><td>16行 6列</td><td>16行 7列</td><td>16行 8列</td><td>16行 9列</td><td>16行 10列</td><td>16行 11列</td><td>16行 12列</td><td>16行 13列</td><td>16行 14列</td><td>16行 15列</td><td>16行 16列</td><td>16行 17列</td><td>16行 18列</td><td>16行 19列</td><td>16行 20列</td><td>16行 21列</td><td>16行 22列</td><td>16行 23列</td><td>16行 24列</td><td>16行 25列</td><td>16行 26列</td><td>16行 27列</td><td>16行 28列</td><td>16行 29列</td><td>16行 30列</td><td>16行 31列</td><td>16行 32列</td><td>16行 33列</td><td>16行 34列</td><td>16行 35列</td><td>16行 36列</td><td>16行 37列</td><td>16行 38列</td><td>16行 39列</td><td>16行 40列</td><td>16行 41列</td><td>16行 42列</td><td>16行 43列</td><td>16行 44列</td><td>16行 45列</td><td>16行 46列</td><td>16行 47列</td><td>16行 48列</td><td>16行 49列</td><td>16行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">17行 1列</td><td class="bg-secondary text-light ">17行 2列</td><td>17行 3列</td><td>17行 4列</td><td>17行 5列</td><td>17行 6列</td><td>17行 7列</td><td>17行 8列</td><td>17行 9列</td><td>17行 10列</td><td>17行 11列</td><td>17行 12列</td><td>17行 13列</td><td>17行 14列</td><td>17行 15列</td><td>17行 16列</td><td>17行 17列</td><td>17行 18列</td><td>17行 19列</td><td>17行 20列</td><td>17行 21列</td><td>17行 22列</td><td>17行 23列</td><td>17行 24列</td><td>17行 25列</td><td>17行 26列</td><td>17行 27列</td><td>17行 28列</td><td>17行 29列</td><td>17行 30列</td><td>17行 31列</td><td>17行 32列</td><td>17行 33列</td><td>17行 34列</td><td>17行 35列</td><td>17行 36列</td><td>17行 37列</td><td>17行 38列</td><td>17行 39列</td><td>17行 40列</td><td>17行 41列</td><td>17行 42列</td><td>17行 43列</td><td>17行 44列</td><td>17行 45列</td><td>17行 46列</td><td>17行 47列</td><td>17行 48列</td><td>17行 49列</td><td>17行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">18行 1列</td><td class="bg-secondary text-light ">18行 2列</td><td>18行 3列</td><td>18行 4列</td><td>18行 5列</td><td>18行 6列</td><td>18行 7列</td><td>18行 8列</td><td>18行 9列</td><td>18行 10列</td><td>18行 11列</td><td>18行 12列</td><td>18行 13列</td><td>18行 14列</td><td>18行 15列</td><td>18行 16列</td><td>18行 17列</td><td>18行 18列</td><td>18行 19列</td><td>18行 20列</td><td>18行 21列</td><td>18行 22列</td><td>18行 23列</td><td>18行 24列</td><td>18行 25列</td><td>18行 26列</td><td>18行 27列</td><td>18行 28列</td><td>18行 29列</td><td>18行 30列</td><td>18行 31列</td><td>18行 32列</td><td>18行 33列</td><td>18行 34列</td><td>18行 35列</td><td>18行 36列</td><td>18行 37列</td><td>18行 38列</td><td>18行 39列</td><td>18行 40列</td><td>18行 41列</td><td>18行 42列</td><td>18行 43列</td><td>18行 44列</td><td>18行 45列</td><td>18行 46列</td><td>18行 47列</td><td>18行 48列</td><td>18行 49列</td><td>18行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">19行 1列</td><td class="bg-secondary text-light ">19行 2列</td><td>19行 3列</td><td>19行 4列</td><td>19行 5列</td><td>19行 6列</td><td>19行 7列</td><td>19行 8列</td><td>19行 9列</td><td>19行 10列</td><td>19行 11列</td><td>19行 12列</td><td>19行 13列</td><td>19行 14列</td><td>19行 15列</td><td>19行 16列</td><td>19行 17列</td><td>19行 18列</td><td>19行 19列</td><td>19行 20列</td><td>19行 21列</td><td>19行 22列</td><td>19行 23列</td><td>19行 24列</td><td>19行 25列</td><td>19行 26列</td><td>19行 27列</td><td>19行 28列</td><td>19行 29列</td><td>19行 30列</td><td>19行 31列</td><td>19行 32列</td><td>19行 33列</td><td>19行 34列</td><td>19行 35列</td><td>19行 36列</td><td>19行 37列</td><td>19行 38列</td><td>19行 39列</td><td>19行 40列</td><td>19行 41列</td><td>19行 42列</td><td>19行 43列</td><td>19行 44列</td><td>19行 45列</td><td>19行 46列</td><td>19行 47列</td><td>19行 48列</td><td>19行 49列</td><td>19行 50列</td></tr>
   <tr><td class="bg-secondary text-light ">20行 1列</td><td class="bg-secondary text-light ">20行 2列</td><td>20行 3列</td><td>20行 4列</td><td>20行 5列</td><td>20行 6列</td><td>20行 7列</td><td>20行 8列</td><td>20行 9列</td><td>20行 10列</td><td>20行 11列</td><td>20行 12列</td><td>20行 13列</td><td>20行 14列</td><td>20行 15列</td><td>20行 16列</td><td>20行 17列</td><td>20行 18列</td><td>20行 19列</td><td>20行 20列</td><td>20行 21列</td><td>20行 22列</td><td>20行 23列</td><td>20行 24列</td><td>20行 25列</td><td>20行 26列</td><td>20行 27列</td><td>20行 28列</td><td>20行 29列</td><td>20行 30列</td><td>20行 31列</td><td>20行 32列</td><td>20行 33列</td><td>20行 34列</td><td>20行 35列</td><td>20行 36列</td><td>20行 37列</td><td>20行 38列</td><td>20行 39列</td><td>20行 40列</td><td>20行 41列</td><td>20行 42列</td><td>20行 43列</td><td>20行 44列</td><td>20行 45列</td><td>20行 46列</td><td>20行 47列</td><td>20行 48列</td><td>20行 49列</td><td>20行 50列</td></tr>
 </table>
</div>


<!-- ############ javascript  ############ -->
<script type="text/javascript">
$(document).ready(function() {
  // ヘッダー固定化
  FixedMidashi.create();
});
</script>
<!-- ############ /javascript  ############ -->


<!-- ############ style  ############ -->
<style type="text/css" media="screen">
  .scroll_div { overflow: auto; }
</style>
<!-- ############ /style  ############ -->

</body>
</html>

公式サイト

公式サイトはこちらです。
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html

導入方法

１、ライブラリをダウンロード

ライブラリをダウンロード
https://www.vector.co.jp/soft/other/java/se498696.html

２、必要なライブラリを取得

ライブラリを解凍したら、以下を抽出しましょう！
fixed_midashi.js

３、ソース作成

fixed_midashi.js
上記を読み込むようにし、当ページのサンプルソースを使えば、完成です！

解説

１、普通にテーブル作成


変哲もないtableタグ、thタグ、trタグ、tdタグを使ってテーブル作成します。

２、tableタグに「_fixedhead」という属性をつける

tableタグに対して、「_fixedhead」という属性をつけてください。属性値は「rows」や「cols」を指定し、固定したい数値を指定します。

例えば、上の2行、左の1列を固定させたい時は
「<table _fixedhead=”rows:2;cols:1“ >」と書きます。

コロンとセミコロンは間違えないように気を付けて！
これで完成です！

３、見出し固定のライブラリ実行

$(document).ready(function() {

  // ヘッダー固定化
  FixedMidashi.create();

});

javascriptで描画完了後に上記を実行すると「_fixedhead」がついているtableタグのヘッダが固定されます！

４、そもそもの説明

ホントは最初に話すべきですが、このライブラリには3種類のモードがあります！

◆bodyモード：画面がヘッダーにかかったら、追従する
◆divモード：テーブルがdivに囲われていて、スクロールバーで固定される
◆混合モード：横と縦（行と列）で追従の仕方を混合する

以下にイメージ画像を載せます！
※詳しくはこちらの本家をご確認ください。

当ページのサンプルはdivモードを使用しています。

bodyモード（画像なので動きません）

bodyモード

divモード（画像なので動きません）

混合モード（画像なので動きません）

４、注意点

tableタグはもちろん、divモードの場合の囲っているdivなどにmargin、paddingを不用意につけたり、なにかしらのcss(例えば、bootstrap)で色々いじると固定行や固定列がずれることがあるので、要注意です！

特にbodyモードの方が繊細なイメージ（by 当方）ですので、個人的には使用する場合はdivモードをおすすめします。見た目的にはbodyモードの方がスタイリッシュなんですけどね。。

また、私が個人的に使っていて気になる点として、行固定は問題なく固定されますが、列固定についてはたまにスクロール中に列がずれてしまう事がたまにあるので、注意が必要です。

よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！

前の記事

コピペ実装可！jQueryマルチセレクトボックス「Select…

次の記事

操作性向上のライブラリパッケージ！「 jQuery UI 」の…