Grid.jsを使って表の行と列を固定します

大きなテーブル（表）もエクセルのように行列を固定して、チェックボックスで行をハイライトします。

Grid.jsとjqueryを使います。CSSも読み込みます。
【公式サイト】Matt's 411
【ダウンロード】Grid

jQueryの記述は、</body>の直下に入れます。headerだと動きませんでした。。。
なんかややこしそうですが、
//taitle property var gridColSortTypes = ["string", "string", "string", "string", "string", "string", "string", "string", "string", "number", "number", "number", "number", "number"],
を表のタイトル部分とあわせるように指定だけすれば動きます

また、左のチェックボックスを外す場合は、コチラをご参考ください。
[js] ヘッダなどを固定したテーブルを作成する場合に便利なJSライブラリ『Grid』をイジる
htmlのテーブルは、指定のIDで囲み指定するだけでOK!

こっちの方が簡単で使いやすい気がします。↓
TableFix.jsを使って表の行と列を固定しますもご参考に。

デモページへ

JSを読み込みます

<link rel="stylesheet" href="css/Grid.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/Grid.js"></script>

JavaScript

<script type="text/javascript">
(function(window, document, undefined) {
"use strict";
//taitle property
var gridColSortTypes = ["string", "string", "string", "string", "string", "string", "string", "string", "string", "number", "number", "number", "number", "number"], 
gridColAlign = [];

var onColumnSort = function(newIndexOrder, columnIndex, lastColumnIndex) {
var offset = (this.options.allowSelections && this.options.showSelectionColumn) ? 1 : 0, 
	doc = document;

if (columnIndex !== lastColumnIndex) {
if (lastColumnIndex > -1) {
	doc.getElementById("demoHdr" + (lastColumnIndex - offset)).parentNode.style.backgroundColor = "";
}
doc.getElementById("demoHdr" + (columnIndex - offset)).parentNode.style.backgroundColor = "#f7f7f7";
}
};

var onResizeGrid = function(newWidth, newHeight) {
var demoDivStyle = document.getElementById("demoDiv").style;
demoDivStyle.width = newWidth + "px";
demoDivStyle.height = newHeight + "px";
};

for (var i=0, col; col=gridColSortTypes[i]; i++) {
gridColAlign[i] = (col === "number") ? "right" : "left";
}

var myGrid = new Grid("demoGrid", {
	srcType : "dom", 
	srcData : "demoTable", 
	allowGridResize : true, 
	allowColumnResize : true, 
	allowClientSideSorting : true, 
	allowSelections : true, 
	allowMultipleSelections : true, 
	showSelectionColumn : true, 
	onColumnSort : onColumnSort, 
	onResizeGrid : onResizeGrid, 
	colAlign : gridColAlign, 
	colBGColors : ["#fafafa"], 
	colSortTypes : gridColSortTypes, 
	fixedCols : 1
});
})(this, this.document);
</script>

HTMl

<div id="demoGrid">
<table id="demoTable">
<colgroup><col class="demoTableCol1"></colgroup>
<thead>
  <tr>
    <th class="tg-031e">見出し</th>
    <th class="tg-031e">タイトル01</th>
    <th class="tg-031e">タイトル02</th>
    <th class="tg-031e">タイトル03</th>
    <th class="tg-031e">タイトル04</th>
    <th class="tg-031e">タイトル05</th>
    <th class="tg-031e">タイトル06</th>
    <th class="tg-031e">タイトル07</th>
    <th class="tg-031e">タイトル08</th>
    <th class="tg-031e">タイトル09</th>
    <th class="tg-031e">1001</th>
    <th class="tg-031e">1002</th>
    <th class="tg-031e">1003</th>
    <th class="tg-031e">1004</th>
    <th class="tg-031e">1005</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-031e">横タイトル01</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル02</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル03</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル04</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル05</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル06</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル07</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル08</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル09</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル10</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル11</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル12</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル13</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル14</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル15</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル16</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル17</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル18</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル19</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル20</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル21</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル22</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル23</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル24</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル25</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル26</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル27</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル28</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル29</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
  <tr>
    <td class="tg-031e">横タイトル30</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
    <td class="tg-031e">○</td>
  </tr>
</tbody>
</table>
</div>

CSS

/* #demoGrid 
-----------------------------------------*/
#demoGrid{
 margin:20px 0 20px 0;
 width: 600px;
 height: 300px;
 overflow: auto;
 	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
 background-color:#f2f2f2;
 padding:10px;
}

/*
 Grid
 MIT-style license. Copyright 2012 Matt V. Murphy
*/
.g_Base {
	background-color : #fff;
}
.g_BaseResize {

	background-color : #eee;
}
.g_BaseResize:hover {
	background-color : #ccc;
}
.g_ResizeDragger {

	background-color : #ccc;
}
/* Title */
.g_HR {
	background-color : #666;
 color:#FFF!important;
}
/* text */
.g_C {
  color:#000;
  }
  
/* row title */  
.g_Cl0 {
  background-color: #F8F8F8!important;
}
.g_Cl1 {
  background-color: #F8F8F8!important;
}

div.g_Base div.g_Body div.g_BodyStatic div.g_Cl{
 text-align:center;
}

2 thoughts on “Grid.jsを使って表の行と列を固定します”

とーりすが・すがすが・りん より:

2019年4月26日 10:16 AM

クロームでしか動かないっすねこれ。。笑

返信
1. yotigory より:
  
  2019年4月26日 2:06 PM
  
  Win10ではすべてのブラウザででもページは動くんですけどね。
  jqueryのバージョンも古いので、最新ではもう動かないかもしれません。
  
  返信