出勤管理（管理者用）の日付行を固定する

出勤管理（管理者用）でスタッフの人数が増えると日付行が上に消えてしまいます。日付行を固定する方法はないでしょうか？

CSSによるスタイル指定で <table> の一部の行を固定することができます。

参考記事

position: sticky でテーブルのヘッダー行を固定

手順

1. 現在お使いのテーマのスタイルシートに、以下のCSSを追加します
   使用中テーマのスタイルシート

   ... table.attmgr_admin_scheduler { display: block; position: relative; overflow: scroll; height: 600px; } table.attmgr_admin_scheduler tbody tr:first-child th { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: #eee; } ...

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   ... table.attmgr_admin_scheduler {     display: block;     position: relative;     overflow: scroll;     height: 600px; } table.attmgr_admin_scheduler tbody tr:first-child th {     position: -webkit-sticky;     position: sticky;     top: 0;     z-index: 1;     background-color: #eee; } ...

2. 表示を確認する際は、ブラウザのキャッシュを削除することをお勧めします

週間スケジュールも同じようにしたい場合は、table.attmgr_weekly_allに対しても同様にします。

スタッフ画像の列も固定したい場合

お使いのテーマによって、スマホなどでテーブルが横に長くなり過ぎてしまう場合は、左端列を固定してもよいかもしれません。

手順

1. 現在お使いのテーマのスタイルシートに、以下のCSSを追加します
   使用中テーマのスタイルシート

   ... table.attmgr_admin_scheduler tr td:first-child { position: sticky; top: 0; left: 0; background: #fff; } table.attmgr_admin_scheduler tr td:first-child::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: #fff; z-index: -1; } ...

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   ... table.attmgr_admin_scheduler tr td:first-child {   position: sticky;   top: 0;   left: 0;   background: #fff; } table.attmgr_admin_scheduler tr td:first-child::before{   content: "";   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;  background: #fff;   z-index: -1; } ...

このプラグインは少人数のスタッフを管理することを想定して作られました。そのため、スタッフの人数が一定数を超えると、フォーム項目数がお使いのサーバーのPHP設定「max_input_vars」の上限を超え、スケジュールが更新されなくなる場合があります。解決方法はこちらをご参照ください。

補足

なお、WordPressには非常に多くのテーマがありますので、お使いのテーマによっては上記のCSSが適用されないケースもあるかと思います。その場合は誠に恐れ入りますが、ご自身またはWEB制作のご担当様の方で調整していただければと思います。

ご参考になれば幸いです。

たいへん参考になる記事を公開してくださっている皆さんに感謝します。