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

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

サンプル

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

サンプル

html

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

css

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

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

全ソース

まとめ

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

シェアする

フォローする

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