ヘッダ固定でスクロールできるテーブル - NoteBook

暮らしカテゴリーの変更を依頼記事元:

www.keyton-co.jp

3 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fwww.keyton-co.jp%2Fblog%2Fmemo%2Farticle%2F%25E3%2583%2598%25E3%2583%2583%25E3%2583%2580%25E5%259B%25BA%25E5%25AE%259A%25E3%2580%2581%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AD%25E3%2583%25BC%25E3%2583%25AB%25E3%2581%25A7%25E3%2581%258D%25E3%2582%258B%25E3%2583%2586%25E3%2583%25BC%25E3%2583%2596%25E3%2583%25AB" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://www.keyton-co.jp/blog/memo/article/%E3%83%98%E3%83%83%E3%83%80%E5%9B%BA%E5%AE%9A%E3%80%81%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB">ヘッダ固定でスクロールできるテーブル - NoteBook</a><a href="https://b.hatena.ne.jp/entry/www.keyton-co.jp/blog/memo/article/%E3%83%98%E3%83%83%E3%83%80%E5%9B%BA%E5%AE%9A%E3%80%81%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB">はてなブックマーク - ヘッダ固定でスクロールできるテーブル - NoteBook</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

ヘッダ固定でスクロールできるテーブル - NoteBook

HTMLで縦に長い表のときは、見出しを固定（エクセルの「ウィンドウ枠の固定」）して、スクロールできる... HTMLで縦に長い表のときは、見出しを固定（エクセルの「ウィンドウ枠の固定」）して、スクロールできるようにしたい。この動作をCSSだけで実現するようにできたのでメモ。動作検証ブラウザ Win：IE6~8、Firefox3.6、Google Chrome8、Safari5 Mac：Firefox3.6、Google Chrome8、Safari5 テーブルのヘッダ／フッタ固定・スクロールできるテーブルを指定できます。（あらかじめセルの幅を決めておく必要があります）ポイント TABLE要素を二つのDIV要素で囲む。外側のDIV要素に「position:relative」を指定。（ポジションの起点になる）内側のDIV要素に「overflow:auto」と「height」を指定。（スクロールする） THEAD要素の中のTR要素に「position:absolute」「bottom:-100