table内をCSSだけでスクロール表示させる

以前、Tableタグを学ぶで書いた、tableタグの内部でスクロールバーを表示させる方法ですが、こちらのものより、よりシンプルな方法を見つけたのでご紹介いたします。

tableタグは1つだけでいい

参考に以下のようなHTMLを書きます。

設定するとCSSは以下のような感じ。

やっていることは、いちばん外側のdivに対しては相対位置指定し、テーブルの項目用に余白を取ります。

次に、テーブルのtheadの行を絶対位置にします。

そして2番目のdivに対しては、スクロール表示を指定しています。

これの実例は、格安独自ドメインの比較レビュー中断の表を見てみてください。

GRC検索順位チェックツール*
順位チェックとサイト管理を1つのツールで!検索順位チェックツールGRC*

スポンサード・リンク

«
»
 

トラックバックURL

コメント(1)

  • imu より:

    CSS参考にさせていただきました。
    おかげで無事実装が終えられそうです。
    大変感謝します。ありがとうございます。

コメントを書き込む