2016-02-16

やりたかったのは、縦・横スクロール付きのヘッダ固定テーブル。（ヘッダ1行・ヘッダ複数行、列固定は無し）で、
こちらの記事がとても参考になったのでメモ。

css3とjavascriptによるヘッダ固定/フッタ固定/列固定テーブルの実装

→CSSとjavascript（jQuery）を使ってやる方法

これを参考にして自分アレンジしたのが↓↓
※スクロールバーの位置がちょっとおかしい（セルに少しかぶる）のでもうちょっと調整した方が良いかも
▼css（自作サンプル）

/*外枠:div*/
#listContainer{
  position:relative;
  /*width,heightを該当ページに記述*/
  padding-top:22px;     /*headerの高さ-1段*/
  padding-bottom:24px;  /*footerの高さ*/
  overflow:hidden;
}
/*scrollbar box:div*/
#listScroller{
  /*width,heightをcontainerと同じサイズで−該当ページに記述*/
  overflow:auto;
  background:#f5f5f5;
}
/*テーブル幅・高さを固定:div*/
#listFixer{
  /*widthを該当ページ内に記述*/
}
#list{
  margin          : 0;
  /*border          : 1px solid #666;*/ /*こっちだとtbodyでゴミライン出る*/
  border-left:1px solid #666;
  border-collapse : collapse;
  background-color: #fff;
}
/*header-固定用*/
#list thead{
  position:absolute;
  /*widthを該当ページ内に記述*/
  top:0;
  left:0;
  z-index:2;
}
/*body*/
#list tbody{
  /*widthを該当ページ内に記述*/
}
/*footer*/
#list tfoot{
  position:absolute;
  /*widthを該当ページ内に記述*/
  bottom:0;
  left:0;
  z-index:2;
}
#list th{
  padding    : 0;
  height: 20px;   /*thead固定用に指定*/
  color      : #333;
  font-size  : 10pt;
  font-weight: normal;
  border     : 1px solid #666;
  width:200px; /*for smale*/
}
#list td{
  padding    : 0;
  font-size  : 10pt;
  border     : 1px solid #666;
  empty-cells: show;
  line-height: 20px;
  width:200px; /*for sample*/
}

▼script(要-jQuery)

▼HTML
</p> <p><div style="width:600px;background:#ffffcc"></p><p> </p><p> <div id="listContainer" style="width:400px;height:200px"></p><p> <div id="listScroller" style="width:400px;height:200px"></p><p> <div id="listFixer" style="width:500px;"></p><p> <table id="list" cellpadding="0" cellspacing="0"> <thead style="width:500px;"> <tr> <th>H1</th><th>H2</th><th>H3</th><th>H4</th><th>H5</th> </tr> </thead> <tfoot style="width:500px;"> <tr> <td>F1</td><td>F2</td><td>F3</td><td>F4</td><td>F5</td> </tr> </tfoot> <tbody style="width:500px;"> <tr> <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr><tr> <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td> </tr><tr> <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td> </tr><tr> <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td> </tr><tr> <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr><tr> <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td> </tr><tr> <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td> </tr><tr> <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td> </tr><tr> <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr><tr> <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td> </tr><tr> <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td> </tr><tr> <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td> </tr> </tbody></p> <p> </table></p><p> </div></p><p> </div></p><p> </div></p><p> </p><p></div></p><p>

ゆちの備忘録

忘れないように。色々メモ。

CSS-Tableのヘッダ・フッタ・列の固定（縦横スクロールも）