CSSで横スクロールテーブルをつくる

こんにちは、95(くごー)です。私のチーム内では最近、タスク完了のご褒美にBOSSから黒糖をもらうのが風習になっています。頂けるのは大変うれしいのですが、食べ物を長く放置する癖がありまして若干食べ物を頂くときに不安を感じます。。まさにジョジョのチョコラータとセッコみたいな感じです。
さて、今回の記事の内容ですが、業務内で横スクロールのテーブルを作成したので記事にしたいと思います。

今回行うこと

テーブルの一部分を固定して横スクロールのテーブルを作成したいと思います。

変更前のテーブル
f:id:kugor9595:20150928095704p:plain

変更後のテーブル f:id:kugor9595:20150928095701p:plain

横スクロールのテーブルの作成

f:id:kugor9595:20150928185450p:plain 変更前のテーブルを横スクロールのテーブルに変更するにあたって、htmlをまず固定したい部分（画像赤枠部分）とスクロールしたい部分（画像青枠部分）を分けて記述します。実際のソース上での変更は以下です(ポイントだけ記述したいので一部省略します)。

<!-- 変更前 -->
<table id="header" class="csTbl">
　<!-- ～省略～ -->
</table>

<!-- 変更後 -->
<div id="x_data_area">

　<!-- 固定したい部分（画像赤枠部分） -->
　<table id="header" class="csTbl">
　　<!-- ～省略～ -->
　</table>

　<!-- スクロールしたい部分（画像青枠部分） -->
　<div id="data">
　　<table class="csTbl">
　　　<!-- ～省略～ -->
　　</table>
　</div>

</div>

次にCSSの変更ポイントですが、固定したい部分とスクロールしたい部分にposition: absoluteを指定して、それらの親要素にposition:relativeを指定します。

/**
* 変更後のCSS
*/

#x_data_area {
   width: 950px;/* テーブルのwidth */
   position:relative;
}

#header {
   width: 20%;
   position: absolute;
   left: 0px;
   top: 0px;
}

#data {
   width:80%;
   position: absolute;
   left:20%;
   top:0;
   overflow-x:scroll;
}

#data table {
   width: 250%;
}

このままでもいいのですが、ブラウザのウィンドウサイズごとにテーブルの高さを可変に調整したいのでhtml末尾に以下のjQueryを追加しました。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function scrollFix(){
    //固定セルの高さ調整(スクロールバーの高さ部分を考慮)
    var h_data = $("#data").height() - 25;
    $("#header").height(h_data);
}

//ページが読み込まれたら
$(document).ready(function() {
    scrollFix();
});

//ブラウザサイズが変更されたら
$(window).on('load resize',function(){
    scrollFix();
});
</script>

以上で完成です。

変更前と変更後のソースは以下です。

変更前のソース

<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<style>
/* 基本のテーブル定義 */
table {width:100%; border:1px solid #000000; border-collapse:collapse;}
td, th {border:1px solid #000000; padding:20px 5px;}
table th {background:#f2f2f2; color:#000000;}
</style>
</head>
<body>
<table>
    <tbody>
    <tr>
        <th>2015年09月</th>
        <th>1日</th>
        <th>2日</th>
        <th>3日</th>
　　　　　　～～
　　　　　　～～
        <th>30日</th>
    </tr>
    <tr>
        <th>Aコース</th>
        <td>〇</td>
　　　　　　～～
　　　　　　～～
        <td>〇</td>
    </tr>
    <tr>
        <th>Bコース</th>
        <td>〇</td>
　　　　　　～～
　　　　　　～～
        <td>〇</td>
    </tr>
    </tbody>
</div>
</table>
</body>
</html>

変更後のソース

<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<style>
/* 基本のテーブル定義 */
table {border:1px solid #000000; border-collapse:collapse;font-size: 13px;}
td, th {border:1px solid #000000; padding:15px; text-align: center;}
table th {background:#f2f2f2; color:#000000;}

#x_data_area {
   width: 950px;
   position:relative;
}

/**
* 固定したい部分
*/

#header {
   width: 20%;
   position: absolute;
   left: 0px;
   top: 0px;
}

#data {
   width:80%;
   position: absolute;
   left:20%;
   top:0;
   overflow-x:scroll;
}

#data table {
   width: 250%;
}
</style>
</head>
<body>
<div id="x_data_area">
<!-- 固定したい部分 -->
<table id="header" class="csTbl">
    <tbody>
    <tr>
        <th>2015年09月</th>
    </tr>
    <tr>
        <th>Aコース</th>
    </tr>
    <tr>
        <th>Bコース</th>
    </tr>
    </tbody>
</table>

<!-- スクロールしたい部分 -->
<div id="data">
<table class="csTbl">
    <tbody>
    <tr>
        <th>1日</th>
        <th>2日</th>
        <th>3日</th>
　　　　　　～～
　　　　　　～～
        <th>30日</th>
    </tr>
    <tr>
        <td>〇</td>
　　　　　　～～
　　　　　　～～
        <td>〇</td>
    </tr>
    <tr>
        <td>〇</td>
　　　　　　～～
　　　　　　～～
        <td>〇</td>
    </tr>
    </tbody>
</table>
</div>
</div>
</body>
</html>

まとめ

今回は横スクロールテーブルを作成しました。縦スクロールの場合も固定部分をスクロール部分に分けて変更していけば概ね簡単にできると思います。

もっといい方法があればコメント頂けると勉強になります。