ヘッダ固定でスクロールできるテーブル

Posted on

HTMLで縦に長い表のときは、見出しを固定(エクセルの「ウィンドウ枠の固定」)して、スクロールできるようにしたい。この動作をCSSだけで実現するようにできたのでメモ。

(2013年8月6日改訂)

動作検証ブラウザ

Win:IE7~10、Firefox22、Google Chrome28
Mac:Firefox22、Google Chrome28、Safari6.0.5

テーブルのヘッダ/フッタ固定・スクロールできるテーブルを指定できます。(あらかじめセルの幅を決めておく必要があります)

ポイント

  • TABLE要素を二つのDIV要素で囲む。
  • 外側のDIV要素に「position:relative」を指定。(ポジションの起点になる)
  • 内側のDIV要素に「overflow:auto」と「height」を指定(スクロールする)。見出しの文の高さの罫線を上下に追加。
  • THEAD要素の中のTR要素に「position:absolute」「top:0」を指定。(外側のDIV要素の上に表示される)
  • TFOOT要素の中のTR要素に「position:absolute」「bottom:0」を指定。(外側のDIV要素の下に表示される)
  • セルの幅とスクロールバーの幅(16px)の合計と外側のDIV要素の幅が同じになるように指定。

以上でTBODY要素がスクロールされます。

注意

  • OperaでTBODYに余白が追加されます。(原因不明)
  • 表に罫線を追加する場合は、罫線が表示されないバグ(IE6,7)や、TBODYの左罫線が表示されない(IE8、Firefox)等があるので、細かい対応が必要になります。
  • 上記方法以外で、TBODY要素に「overflow-auto」を指定する方法がありますが、IE で正しく表示されないバグがあります。(TBODY要素に指定したoverflowが無視される・高さがTRに継承されるなど)

デモページ

HTML部

<div class="scroll-table"><!-- 外側のDIV要素 -->
<div class="scroll-table-inner"><!-- 内側のDIV要素 -->
 <table>
            <table>
                <thead>
                    <tr><th class="th-title">Date</th><th>IE</th><th>Firefox</th><th>Chrome</th><th>Safari</th><th>Opera</th><th>Other</th></tr>
                </thead>
                <tfoot>
                    <tr><th class="th-title">Date</th><th>IE</th><th>Firefox</th><th>Chrome</th><th>Safari</th><th>Opera</th><th>Other</th></tr>
                </tfoot>
                <tbody>
                    <tr><th>2013-07</th><td>51.24</td><td>13.09</td><td>23.19</td><td>8.38</td><td>0.92</td><td>3.18</td></tr>
                    <tr><th>2013-06</th><td>50.86</td><td>13.26</td><td>23.68</td><td>9.07</td><td>0.88</td><td>2.25</td></tr>
                    <tr><th>2013-05</th><td>51.72</td><td>14.1</td><td>22.97</td><td>8.05</td><td>0.94</td><td>2.23</td></tr>
                    <tr><th>2013-04</th><td>51.32</td><td>14.63</td><td>22.78</td><td>8.11</td><td>1.04</td><td>2.12</td></tr>
                    <tr><th>2013-03</th><td>52.36</td><td>14.29</td><td>22.28</td><td>8.08</td><td>1</td><td>2</td></tr>
                    <tr><th>2013-02</th><td>52.38</td><td>14.29</td><td>21.69</td><td>8.67</td><td>1.03</td><td>1.95</td></tr>
                    <tr><th>2013-01</th><td>53.06</td><td>14.48</td><td>21.39</td><td>8.1</td><td>1.03</td><td>1.94</td></tr>
                    <tr><th>2012-12</th><td>53.9</td><td>14.51</td><td>20.87</td><td>7.86</td><td>1.05</td><td>1.81</td></tr>
                    <tr><th>2012-11</th><td>54.34</td><td>14.83</td><td>20.14</td><td>7.86</td><td>1.09</td><td>1.75</td></tr>
                    <tr><th>2012-10</th><td>54.04</td><td>15.04</td><td>19.88</td><td>8.02</td><td>1.28</td><td>1.75</td></tr>
                    <tr><th>2012-09</th><td>54.66</td><td>15.46</td><td>19.36</td><td>7.43</td><td>1.32</td><td>1.76</td></tr>
                    <tr><th>2012-08</th><td>54.7</td><td>15.88</td><td>18.87</td><td>7.17</td><td>1.31</td><td>2.07</td></tr>
                    <tr><th>2012-07</th><td>52.86</td><td>17.72</td><td>18.82</td><td>7.08</td><td>1.5</td><td>2.02</td></tr>
                    <tr><th>2012-06</th><td>52.23</td><td>19.09</td><td>17.95</td><td>7.01</td><td>1.63</td><td>2.09</td></tr>
                    <tr><th>2012-05</th><td>52.74</td><td>19.56</td><td>17.68</td><td>6.9</td><td>1.57</td><td>1.55</td></tr>
                    <tr><th>2012-04</th><td>54.8</td><td>18.54</td><td>16.95</td><td>6.71</td><td>1.46</td><td>1.55</td></tr>
                    <tr><th>2012-03</th><td>56.14</td><td>17.67</td><td>16.92</td><td>6.45</td><td>1.45</td><td>1.37</td></tr>
                    <tr><th>2012-02</th><td>54.36</td><td>18.05</td><td>17.46</td><td>7.38</td><td>1.45</td><td>1.3</td></tr>
                    <tr><th>2012-01</th><td>52.38</td><td>19.17</td><td>18.04</td><td>7.01</td><td>1.67</td><td>1.73</td></tr>
                    <tr><th>2011-12</th><td>53.58</td><td>19.24</td><td>17.18</td><td>6.55</td><td>1.68</td><td>1.77</td></tr>
                    <tr><th>2011-11</th><td>53.85</td><td>19.18</td><td>16.82</td><td>6.67</td><td>1.63</td><td>1.85</td></tr>
                    <tr><th>2011-10</th><td>54.56</td><td>19.31</td><td>16.45</td><td>6.31</td><td>1.63</td><td>1.74</td></tr>
                    <tr><th>2011-09</th><td>55.39</td><td>19.73</td><td>15.6</td><td>6.05</td><td>1.64</td><td>1.58</td></tr>
                    <tr><th>2011-08</th><td>55.87</td><td>19.98</td><td>14.83</td><td>6.19</td><td>1.6</td><td>1.52</td></tr>
                    <tr><th>2011-07</th><td>54.59</td><td>21.06</td><td>14.71</td><td>6.37</td><td>1.73</td><td>1.54</td></tr>
                    <tr><th>2011-06</th><td>55.46</td><td>21</td><td>13.84</td><td>6.55</td><td>1.65</td><td>1.51</td></tr>
                    <tr><th>2011-05</th><td>56.77</td><td>20.88</td><td>12.93</td><td>6.29</td><td>1.58</td><td>1.55</td></tr>
                    <tr><th>2011-04</th><td>60.07</td><td>19.44</td><td>11.54</td><td>6.09</td><td>1.43</td><td>1.43</td></tr>
                    <tr><th>2011-03</th><td>58.25</td><td>20.62</td><td>11.91</td><td>6.35</td><td>1.52</td><td>1.35</td></tr>
                    <tr><th>2011-02</th><td>57.44</td><td>21.28</td><td>11.71</td><td>6.63</td><td>1.64</td><td>1.3</td></tr>
                    <tr><th>2011-01</th><td>57.69</td><td>21.57</td><td>10.93</td><td>6.77</td><td>1.7</td><td>1.34</td></tr>
                    <tr><th>2010-12</th><td>58.6</td><td>21.63</td><td>9.96</td><td>6.63</td><td>1.82</td><td>1.36</td></tr>
                    <tr><th>2010-11</th><td>58.56</td><td>22.18</td><td>9.12</td><td>6.74</td><td>1.98</td><td>1.41</td></tr>
                    <tr><th>2010-10</th><td>59.49</td><td>22.27</td><td>8.23</td><td>6.55</td><td>2.03</td><td>1.43</td></tr>
                    <tr><th>2010-09</th><td>59.94</td><td>22.44</td><td>7.66</td><td>6.48</td><td>1.98</td><td>1.51</td></tr>
                    <tr><th>2010-08</th><td>60.36</td><td>22.74</td><td>7.23</td><td>6.31</td><td>1.75</td><td>1.6</td></tr>
                    <tr><th>2010-07</th><td>60.81</td><td>22.98</td><td>6.93</td><td>6.03</td><td>1.61</td><td>1.64</td></tr>
                    <tr><th>2010-06</th><td>60.97</td><td>23.15</td><td>6.63</td><td>6.04</td><td>1.62</td><td>1.6</td></tr>
                    <tr><th>2010-05</th><td>61.51</td><td>22.97</td><td>6.14</td><td>6.05</td><td>1.6</td><td>1.74</td></tr>
                    <tr><th>2010-04</th><td>62.27</td><td>22.74</td><td>5.52</td><td>6.04</td><td>1.61</td><td>1.81</td></tr>
                    <tr><th>2010-03</th><td>62.98</td><td>22.33</td><td>5.27</td><td>6.14</td><td>1.75</td><td>1.53</td></tr>
                    <tr><th>2010-02</th><td>64.09</td><td>22.54</td><td>4.87</td><td>5.86</td><td>1.69</td><td>0.95</td></tr>
                    <tr><th>2010-01</th><td>65.07</td><td>21.81</td><td>4.46</td><td>5.7</td><td>1.68</td><td>1.28</td></tr>
                </tbody>
            </table>
</div>
</div>

CSS

/****************************************/
/* ヘッダ、フッタ固定
/****************************************/
.scroll-table {
    position: relative;
}
.scroll-table .scroll-table-inner {
    height: 200px;
    overflow: auto;
}
.scroll-table table {
    border-top: 3em solid #fff;
    border-bottom: 3em solid #fff;
}
.scroll-table table th ,
.scroll-table table td {
    text-align: center;
    vertical-align: middle;
}
.scroll-table table thead tr {
    position: absolute;
    left: 0;
    top: 0;
}
.scroll-table table tfoot tr {
    position: absolute;
    left: 0;
    bottom: 0;
}
.scroll-table table thead tr th ,
.scroll-table table tfoot tr th {
    height: 3em;
    line-height: 1.142857;/*16px*/
}
.scroll-table table tbody tr td ,
.scroll-table table thead tr th ,
.scroll-table table tfoot tr th {
    width: 80px;
}
.scroll-table table tbody tr th ,
.scroll-table table thead tr th.th-title ,
.scroll-table table tfoot tr th.th-title {
    width: 104px;
}

/****************************************/
/* Color
/****************************************/
.scroll-table table thead tr th {
    color: #fff;
    background: #09aa04;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(9,170,4,1)), to(rgba(9,170,4,0.8)));
    background: -webkit-linear-gradient(top, rgba(9,170,4,1), rgba(9,170,4,0.8));
    background:    -moz-linear-gradient(top, rgba(9,170,4,1), rgba(9,170,4,0.8));
    background:      -o-linear-gradient(top, rgba(9,170,4,1), rgba(9,170,4,0.8));
    background: linear-gradient(to bottom, rgba(9,170,4,1), rgba(9,170,4,0.8));
}
.scroll-table table tfoot tr th {
    color: #fff;
    background: #09aa04;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(9,170,4,1)), to(rgba(9,170,4,0.8)));
    background: -webkit-linear-gradient(bottom, rgba(9,170,4,1), rgba(9,170,4,0.8));
    background:    -moz-linear-gradient(bottom, rgba(9,170,4,1), rgba(9,170,4,0.8));
    background:      -o-linear-gradient(bottom, rgba(9,170,4,1), rgba(9,170,4,0.8));
    background: linear-gradient(to top, rgba(9,170,4,1), rgba(9,170,4,0.8));
}
.scroll-table table thead tr th.th-title {
    background: #ffa64d;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,166,77,1)), to(rgba(255,166,77,0.8)));
    background: -webkit-linear-gradient(top, rgba(255,166,77,1), rgba(255,166,77,0.8));
    background:    -moz-linear-gradient(top, rgba(255,166,77,1), rgba(255,166,77,0.8));
    background:      -o-linear-gradient(top, rgba(255,166,77,1), rgba(255,166,77,0.8));
    background: linear-gradient(to bottom, rgba(255,166,77,1), rgba(255,166,77,0.8));
}
.scroll-table table tfoot tr th.th-title {
    background: #ffa64d;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,166,77,1)), to(rgba(255,166,77,0.8)));
    background: -webkit-linear-gradient(bottom, rgba(255,166,77,1), rgba(255,166,77,0.8));
    background:    -moz-linear-gradient(bottom, rgba(255,166,77,1), rgba(255,166,77,0.8));
    background:      -o-linear-gradient(bottom, rgba(255,166,77,1), rgba(255,166,77,0.8));
    background: linear-gradient(to top, rgba(255,166,77,1), rgba(255,166,77,0.8));
}
.scroll-table table tbody tr th {
    background: #fff9f2;
}
.scroll-table table tbody tr:nth-child(2n) th {
    background: #f7f8e3;
}
.scroll-table table tbody tr:nth-child(2n) td {
    background: #f6feee;
}

/****************************************/
/* For less than IE10
/****************************************/
.ie-lt10 .scroll-table table thead tr th {
    overflow: hidden;
    background: transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff09aa04,endColorstr=#cc09aa04,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff09aa04,endColorstr=#cc09aa04,GradientType=0);
}
.ie-lt10 .scroll-table table tfoot tr th {
    position: relative;
    background: transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc09aa04,endColorstr=#ff09aa04,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc09aa04,endColorstr=#ff09aa04,GradientType=0);
}
.ie-lt10 .scroll-table table thead tr th.th-title {
    position: relative;
    background: transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffa64d,endColorstr=#ccffa64d,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffa64d,endColorstr=#ccffa64d,GradientType=0);
}
.ie-lt10 .scroll-table table tfoot tr th.th-title {
    position: relative;
    background: transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffa64d,endColorstr=#ffffa64d,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffa64d,endColorstr=#ffffa64d,GradientType=0);
}

お手数ですが、下記入力項目に「コメント投稿」と入力して下さい。

Trackback

ページトップに戻る