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

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

サンプル

サンプルではテーブルの見出し下のデータ部分がスクロールします。

サンプル

html

外枠、見出し、データ部分に分かれています。見出しとデータ部分のテーブルをdivで切って分けているところがポイントです。

css

外枠、見出し、データ部分に分かれています。IE6とIE7は「border-collapse: collapse;」でハックして、IE8以上のブラウザと同じテーブル表示を実現させています。

全ソース

まとめ

  • HTML、CSS共に外枠、見出し、データ部分と3つ分かれている。
  • IE6、IE7はCSSハックを行っている。
スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

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