Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
TableFix.jsを使って表の行と列を固定します - CodingMania
CodingMania

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

yotigory

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">&nbsp;</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;
}
モバイルバージョンを終了