大きなテーブル（表）もエクセルのように行列を固定します。hoverのハイライトも追加。
TableFix.jsとjqueryを使います。CSSも読み込みます。
【公式サイト】jquery.tablefix.js
【参考】
tablefix.jsでスクロールバーの分だけ表示がずれるのを修正した。ついでにフォントサイズ変更した時にずれるのにも対応した。
↑スクロールバーの分だけ表示がずれるので修正版をダウンロードしました。
【ハイライト表示も追加。↓行列ハイライト表示参考】
マウスオーバーで行列をハイライト
ちょっと実装がややこしかったですが、
Grid.jsを使って表の行と列を固定しますもご参考に。
JSを読み込みます
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/TableFix.js"></script>
JavaScript
$(function(){
$('.mod_table table').tablefix({width: 700, height: 300, fixRows: 1, fixCols: 1});
});
//行列ハイライト
$(document).ready(function() {
$(".mod_table table td,.mod_table table th").hover(function() {
$(this).not('th').addClass('hover');
$(this).siblings().not('th').addClass('hover');
var index = $(this).index();
$(this).closest('table').find('tr').each(function() {
if($('td, th', this).size() > 0) {
$('td, th', this).eq(index).not('th').addClass('hover');
}
});
}, function() {
$(this).removeClass('hover');
$(this).siblings().not('th').removeClass('hover');
var index = $(this).index();
$(this).closest('table').find('tr').each(function() {
if($('td, th', this).size() > 0) {
$('td, th', this).eq(index).not('th').removeClass('hover');
}
});
});
});
HTMl
<div class="mod_table">
<table>
<thead>
<tr>
<th class="coltitle"> </th>
<th class="coltitle" scope="col">タイトル01</th>
<th class="coltitle" scope="col">タイトル02</th>
<th class="coltitle" scope="col">タイトル03</th>
<th class="coltitle" scope="col">タイトル04</th>
<th class="coltitle" scope="col">タイトル05</th>
<th class="coltitle" scope="col">タイトル06</th>
<th class="coltitle" scope="col">タイトル07</th>
<th class="coltitle" scope="col">タイトル08</th>
<th class="coltitle" scope="col">タイトル09</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">横タイトル01</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル02</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル03</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル04</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル05</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル06</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル07</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル08</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル09</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル10</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル11</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル12</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル13</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル14</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル15</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル16</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル17</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル18</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル19</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル20</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル21</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル22</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル23</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル24</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル25</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル26</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル27</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル28</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル29</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<th scope="row">横タイトル30</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</tbody>
</table>
</div>
CSS
/* .mod_table
-----------------------------------------*/
.mod_table{
background-color: #f2f2f2;
border-radius: 4px;
padding: 10px;
width: 720px;
}
.mod_table table{
width:1000px;
background:#FFF;
}
.mod_table table th,td{
border-bottom:solid 1px #7f7f7f;
border-left:solid 1px #7f7f7f;
padding:10px;
}
.mod_table table th{
background:#f8f8f8;
color:#000;
font-weight:normal;
text-align:center;
vertical-align:middle;
white-space:nowrap;
}
.mod_table table th.coltitle{
background:#666;
color:#FFF;
}
.mod_table table td{
text-align:center;
}
/* */
.mod_table table td.hover,
.mod_table table th.hover {
background-color:#FFFEB5;
}