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

サンプル

html

qiita.html

<!-- 外枠 -->
<div class="x-data-area">
    <!-- ロック -->
    <div class="x-lock-box">
        <table class="width300 data">
            <col style="width: 50%;" />
            <col style="width: 50%;" />
            <tr>
                <th><span title="ロック見出">ロック見出</span></th>
                <th class="rb-none"><span title="ロック見出しロック見出しロック見出しロック見出し">ロック見出しロック見出しロック見出しロック見出し</span></th>
            </tr>
            <tr>
                <td><p title="ロックデータ">ロックデータ</p></td>
                <td class="rb-none"><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
            </tr>
            <tr>
                <td><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
                <td class="rb-none"><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
            </tr>
            <tr>
                <td><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
                <td class="rb-none"><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
            </tr>
            <tr>
                <td><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
                <td class="rb-none"><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
            </tr>
            <tr>
                <td><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
                <td class="rb-none"><p title="ロックデータロックデータロック">ロックデータロックデータロック</p></td>
            </tr>
        </table>
    </div>
    <!-- /ロック -->
    <!-- 横スクロール部分 -->
    <div class="x-scroll-box">
        <table class="width2000 data">
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <tr>
                <th><span title="スクロール見出し">スクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
                <th class="rb-none"><span title="スクロール見出しスクロール見出しスクロール見出しスクロール見出し">スクロール見出しスクロール見出しスクロール見出しスクロール見出し</span></th>
            </tr>
            <tr>
                <td><p title="スクロールデータ">スクロールデータ</p></td>
                <td><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <td><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <td><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <td><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <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><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <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><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <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><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <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><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <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>
<!-- /外枠 -->

css

qiita.css

/* 外枠 */
div.x-data-area {
    width: 800px;
    overflow: hidden;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
}

/* ロック */
div.x-lock-box {
    float: left;
    width: 300px;
}

/* 横スクロール */
div.x-scroll-box {
    float: left;
    width: 499px;
    border-left: 1px solid #CCC;
    overflow-y: hidden;
    overflow-x: scroll;
}

/* 幅 */
.width300 {
    width: 300px;
}

.width2000 {
    width: 2000px;
}

/* テーブル */
table.data {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

table.data th,
table.data td {
    padding: 2px;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    text-align: left;
}

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

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

table.data td p {
    margin: 0;
}

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

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