ブログ

読んで思い出す。忘れるために書く

Q. テーブルの凡例をスクロールに応じて固定表示させたい

A. position: sticky; を設定する

thead tr th {
  position: sticky;
  top: 47px; /* 調整が必要な場合、数値を指定する (通常は 0 で OK) */
}

0才 → 1才 → 2才... とスクロールに応じて表示が切り替わっている様子:

https://i.gyazo.com/99e931311a6cab7185dc328f36cf415e.gif

これは次の Pull Request : 「成長記録編集・削除ページの追加 by gouf · Pull Request #42 · msm0046/growth_curve_sample」の コミット内容 に含まれている

Links