前回はテーブルを分けて縦スクロールをする方法をご紹介いたしました。今回はテーブルを分けて横スクロールをする方法ご紹介いたします。
サンプル
サンプルでは右側のデータ部分が横スクロールします。
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ハックを行っている。
コメント