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

サンプル

html

qiita.html

<!-- 外枠 -->
<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

qiita.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;
}