元幼稚園教諭の母は働きたくない!!

現役幼稚園教諭の方に役立つ情報、幼稚園の裏側暴露、子育てに便利なものを発信しています!息子の為に在宅で月8万円の収入を目指す奮闘記も!

【はてなブログ】行と列を固定してスクロールするテーブル【自分用メモ】

当ブログではアフィリエイト広告を利用しています

同じように困っている方の為に

 

はてなブログでこういう行と列を固定した表を作りたいとき↓↓

 

  好きな食べ物 嫌いな食べ物 好きな動物 好きな色 好きな芸能人 好きな科目 将来の夢 座右の銘
りすさん 動く 動く 動く 動く 動く 動く 動く 動く
ぞうさん 動く 動く 動く 動く 動く 動く 動く 動く
キリンさん 動く 動く 動く 動く 動く 動く 動く 動く
ライオンさん 動く 動く 動く 動く 動く 動く 動く 動く
かばさん 動く 動く 動く 動く 動く 動く 動く 動く
イタチさん 動く 動く 動く 動く 動く 動く 動く 動く
うさぎさん 動く 動く 動く 動く 動く 動く 動く 動く
くまさん 動く 動く 動く 動く 動く 動く 動く 動く
ねずみさん 動く 動く 動く 動く 動く 動く 動く 動く

 

 

設定→デザインCSSに以下のCSSを記述します。backgroundの色はお好きにかえてください。

 

CSS

th, td {
  white-space: nowrap;
  text-align: center;
}
/* スクロールバーの実装 */
.table_sticky {
  width: auto;
  table-layout: fixed;
  overflow: scroll;
  height: calc(100vh / 2);
  border-collapse: collapse;
}

 

.table_sticky thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #c0c0c0;
  border-top: #FFFFFF;
}
.table_sticky tr > th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #FFFFFF;
}

.table_sticky {
  width: 100%;
  table-layout: fixed;
  overflow: scroll;
  height: calc(100vh / 2);
  border-collapse: collapse;
}

 

※2023/02/04追記
ブログのデザインによっては上記のCSSでうまくいかないことがあるようです。そんなときは.table_sticky{}の中にdisplay: block;を入れてみてください。優しいおばけさんに教えていただきました。

 

th, td { 
white-space: nowrap;
  text-align: center;
}
/* スクロールバーの実装 */
.table_sticky {
  width: auto;
  table-layout: fixed;
  overflow: scroll;
  height: calc(100vh / 2);
  border-collapse: collapse;
  display: block;
}

.table_sticky thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #c0c0c0;
  border-top: #FFFFFF;
}
.table_sticky tr > th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #FFFFFF;
}

.table_sticky {
  width: 100%;
  table-layout: fixed;
  overflow: scroll;
  height: calc(100vh / 2);
  border-collapse: collapse;
}

 

 

記事作成で下記のHTMLを使って表を作成すれば出来上がり。

 

HTML<table class="table_sticky" style="height: 200px;" width="">
    <thead>
        <tr>
            <th>行固定1</th>
            <th>行固定2</th>
            <th>行固定3</th>
            <th>行固定4</th>
            <th>行固定5</th>
        </tr>     
    </thead>
    <tbody>
        <tr>
            <th>列固定1</th>
            <td>動くよ</td>
            <td>動くよ</td>
            <td>動くよ</td>
            <td>動くよ</td>
        </tr>
   <tr>
            <th>列固定2</th>
            <td>動くよ</td>
            <td>動くよ</td>
            <td>動くよ</td>
            <td>動くよ</td>
        </tr>
    </tbody>
</table>

 

 

色んな方がCSSとHTMLを公開してくださっていますが、どれもはてなブログではうまくいかなかったんです。

 

 

発見したのがめぐ (id:megsan)さんの記事。

 

lv1meg.hatenablog.com

 

こちらに行が固定されたCSSを公開してくれていました。

 

これをいじれば、縦横固定できそうだ!ということで、めぐ (id:megsan)さんのCSSをお借りし、自分でCSSを書き換えてみたのですが全く上手くいかず…。

 

悩みに悩んでTwitterで助けを求めたところ、通りすがりの優しいおばけ…リアイム (id:a1t2s2u2)さんが手直ししてくださって完成しました。(手直しどころか、全部やってもらった…)

 

 

同じように困っている方がいるのではないか、と思ったのと自分用のメモということでここに残しておきます…。

 

めぐ (id:megsan)さん

lv1meg.hatenablog.com

 

リアイム (id:a1t2s2u2)さん

riaimu.hateblo.jp

 

 

 

お二人とも優しい方で、感謝してもしきれません…。

 

本当にありがとうございました。