同じように困っている方の為に
はてなブログでこういう行と列を固定した表を作りたいとき↓↓
好きな食べ物 | 嫌いな食べ物 | 好きな動物 | 好きな色 | 好きな芸能人 | 好きな科目 | 将来の夢 | 座右の銘 | |
---|---|---|---|---|---|---|---|---|
りすさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
ぞうさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
キリンさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
ライオンさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
かばさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
イタチさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
うさぎさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
くまさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
ねずみさん | 動く | 動く | 動く | 動く | 動く | 動く | 動く | 動く |
設定→デザインCSSに以下のCSSを記述します。backgroundの色はお好きにかえてください。
※2023/02/04追記
ブログのデザインによっては上記のCSSでうまくいかないことがあるようです。そんなときは.table_sticky{}の中にdisplay: block;を入れてみてください。優しいおばけさんに教えていただきました。
記事作成で下記のHTMLを使って表を作成すれば出来上がり。
色んな方がCSSとHTMLを公開してくださっていますが、どれもはてなブログではうまくいかなかったんです。
発見したのがめぐ (id:megsan)さんの記事。
こちらに行が固定されたCSSを公開してくれていました。
これをいじれば、縦横固定できそうだ!ということで、めぐ (id:megsan)さんのCSSをお借りし、自分でCSSを書き換えてみたのですが全く上手くいかず…。
悩みに悩んでTwitterで助けを求めたところ、通りすがりの優しいおばけ…リアイム (id:a1t2s2u2)さんが手直ししてくださって完成しました。(手直しどころか、全部やってもらった…)
ダメもとで聞いてみる…。
— 働きたくない母(ナイハハ)雑記ブログ (@LG8lro86hCEkWV7) 2022年8月16日
CSSに詳しい方
テーブルの行と列の1列目を固定してスクロールさせたいのですが、列の固定がうまく出来ません
画像のコードの下にどういう記述をしたらいいのでしょうか
他のCSSでの方法も試しましたが、このCSSでないとうまく動作せず#CSS #ブログ#ブログ仲間と繋がりたい pic.twitter.com/uYTldyLSLY
同じように困っている方がいるのではないか、と思ったのと自分用のメモということでここに残しておきます…。
めぐ (id:megsan)さん
リアイム (id:a1t2s2u2)さん
お二人とも優しい方で、感謝してもしきれません…。
本当にありがとうございました。