テーブルを分けて縦スクロールをする

今回はテーブルを分けて縦スクロールをする方法をご紹介いたします。

サンプル
html
css
全ソース
まとめ

サンプル

サンプルではテーブルの見出し下のデータ部分がスクロールします。

html

外枠、見出し、データ部分に分かれています。見出しとデータ部分のテーブルをdivで切って分けているところがポイントです。

<!-- 外枠 -->
<div class="y-data-area">
    <!-- 見出し -->
    <table class="y-data-ttl">
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <tr>
            <th>見出し</th>
            <th>見出し</th>
            <th>見出し</th>
            <th>見出し</th>
            <th class="rb-none">見出し</th>
        </tr>
    </table>
    <!-- /見出し -->
    <!-- データ -->
    <div class="y-scroll-box">
        <div class="y-hidden">
            <table class="y-data">
                <col style="width: 20%;" />
                <col style="width: 20%;" />
                <col style="width: 20%;" />
                <col style="width: 20%;" />
                <col style="width: 20%;" />
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
                <tr>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                </tr>
            </table>
        </div>
    </div>
    <!-- /データ -->
</div>
<!-- /外枠 -->

css

外枠、見出し、データ部分に分かれています。IE6とIE7は「border-collapse: collapse;」でハックして、IE8以上のブラウザと同じテーブル表示を実現させています。

/* 外枠 */
div.y-data-area {
    width: 300px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
}

/* 見出し */
table.y-data-ttl {
    width: 300px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

table.y-data-ttl th {
    border-top: 1px solid #CCC;
    background: #ECECEC;
}

table.y-data-ttl th,
table.y-data-ttl td {
    padding: 2px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

table.y-data-ttl th.rb-none,
table.y-data-ttl td.rb-none {
    border-right: none;
}

/* データ */
div.y-scroll-box {
    width: 300px;
    max-height: 150px;
    height: auto !important;
    height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
}

div.y-hidden {
    overflow: hidden;
    padding-bottom: 15px;
}

table.y-data {
    width: 300px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

table.y-data th,
table.y-data td {
    padding: 2px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

table.y-data th.rb-none,
table.y-data td.rb-none {
    border-right: none;
}

table.y-data td {
    overflow: hidden;
    white-space: nowrap;
}

table.y-data td p {
    margin: 0;
}

/* IE6ハック */
table.y-data-ttl,
table.y-data {
    _border-collapse: collapse;
}

/* IE7ハック */
*:first-child+html table.y-data-ttl,
*:first-child+html table.y-data {
    border-collapse: collapse;
}

全ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>
    部分縦スクロール
</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
/* 外枠 */
div.y-data-area {
    width: 300px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
}

/* 見出し */
table.y-data-ttl {
    width: 300px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

table.y-data-ttl th {
    border-top: 1px solid #CCC;
    background: #ECECEC;
}

table.y-data-ttl th,
table.y-data-ttl td {
    padding: 2px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

table.y-data-ttl th.rb-none,
table.y-data-ttl td.rb-none {
    border-right: none;
}

/* データ */
div.y-scroll-box {
    width: 300px;
    max-height: 150px;
    height: auto !important;
    height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
}

div.y-hidden {
    overflow: hidden;
    padding-bottom: 15px;
}

table.y-data {
    width: 300px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

table.y-data th,
table.y-data td {
    padding: 2px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

table.y-data th.rb-none,
table.y-data td.rb-none {
    border-right: none;
}

table.y-data td {
    overflow: hidden;
    white-space: nowrap;
}

table.y-data td p {
    margin: 0;
}

/* IE6ハック */
table.y-data-ttl,
table.y-data {
    _border-collapse: collapse;
}

/* IE7ハック */
*:first-child+html table.y-data-ttl,
*:first-child+html table.y-data {
    border-collapse: collapse;
}
</style>
</head>
<body>

    <!-- 外枠 -->
    <div class="y-data-area">
        <!-- 見出し -->
        <table class="y-data-ttl">
            <col style="width: 20%;" />
            <col style="width: 20%;" />
            <col style="width: 20%;" />
            <col style="width: 20%;" />
            <col style="width: 20%;" />
            <tr>
                <th>見出し</th>
                <th>見出し</th>
                <th>見出し</th>
                <th>見出し</th>
                <th class="rb-none">見出し</th>
            </tr>
        </table>
        <!-- /見出し -->
        <!-- データ -->
        <div class="y-scroll-box">
            <div class="y-hidden">
                <table class="y-data">
                    <col style="width: 20%;" />
                    <col style="width: 20%;" />
                    <col style="width: 20%;" />
                    <col style="width: 20%;" />
                    <col style="width: 20%;" />
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                    <tr>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                        <td class="rb-none"><p title="データデータデータデータデータ">データデータデータデータデータ</p></td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- /データ -->
    </div>
    <!-- /外枠 -->

</body>
</html>

まとめ

HTML、CSS共に外枠、見出し、データ部分と3つ分かれている。
IE6、IE7はCSSハックを行っている。