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

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

サンプル

サンプルでは右側のデータ部分が横スクロールします。

サンプル

html

テーブルをdivで切り、「float: left;」で横並びにして分けています。

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

横スクロール枠の「div.x-scroll-box」で指定している「width: 499px;」よりも大きい幅を、ネストしている要素のテーブルクラス「.width2000」で「width: 2000px;」を指定することにより実現させています。

また前回の縦スクロールと同じように、IE6とIE7は「border-collapse: collapse;」でハックして、IE8以上のブラウザと同じテーブル表示を実現させています。

/* 外枠 */
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;
}

全ソース

<!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.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;
}
</style>
</head>
<body>

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

</body>
</html>

まとめ

  • テーブルをdivで切り、「float: left;」で横並びにして分けている。
  • 横スクロール枠のよりも大きい幅を、ネストしている要素の幅に指定している。
  • IE6、IE7はCSSハックを行っている。
スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!