UPDATE:2022.8.30
- CATEGORY
IEのサポートが終了してからのCSS事情その2
こんにちは、かずです。前回ご紹介したCSSはこちら
IEのサポート終了してからのCSS事情
最近<table>の列や行を固定する必要があるコーディングをしたのですが
ついIE対応にJavaScript使わないとなーとか思って及び腰に・・・
と思っていたらもうIEサポート終わってるじゃん!とcssで対応
position: sticky
前述のJavaScriptを使わなきゃだったり、そもそも2カラム等のサイドバーとかに使うものだと思っていたこともあり存在をあまり意識していなかったのですが、テーブルの行・列固定に使えるんですね!
ヘッダー | ヘッダー | ヘッダー |
---|---|---|
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
ヘッダー2 | ヘッダー2 | ヘッダー2 |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
ヘッダー2 | ヘッダー2 | ヘッダー2 |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
テキスト | テキスト | テキスト |
調べながらやっているうちに、こんな風にちょっとオシャレな動きも出来ることが判明しました!(遅い)
今回は忘れかけていたCSSの一例でしたが、まだまだありそうな気がする・・・
のでまた使う機会があれば備忘録かねて色々書いていこうと思います!
それでは。