新規投稿
フォローする

詳細画面にてテーブルの行を固定したい

お世話になっております。

テーブルをスクロールした際に一番上の行を固定したいのですが、検索しても見つからず質問させて頂きました。

どなたか教えて頂けないでしょうか。

ジャバは超初心者です。

0

9件のコメント

Avatar
koichi

nekokoさん

こんにちは。

 

レコード詳細画面のサブテーブルのヘッダー固定は、CSSを使って実装できます。

stickyの使い方については、「テーブル 固定 sticky」などでググってみてください。

.show-subtable-gaia th {
  position: sticky;
  top: 128px; /* 固定位置(メニューバーの縦幅分を考慮)*/
}
koichiにより編集されました
1
Avatar
nekoko

CSSを使って実装できるんですね!

早速試してみます。

ありがとうございます。

1
Avatar
nekoko

koichi様 

送っていただいたCSSのコードを入力したのですが反映されず、画像のような状態に警告が出てきてしまいます。お手数ですが間違えている箇所かわかりましたらご指摘いただけないでしょうか。

nekokoにより編集されました
1
Avatar
koichi

nekokoさん

そちらのエラーは無視して問題ありません。

上記コードで反映されない場合は「position: -webkit-sticky;」も追加してみてください。

なお、IE11ではstickyが対応していませんので、以下のように別途JSを書く必要があります。

https://mayubou.net/scroll-position-sticky/

1
Avatar
nekoko

koichi様

追加コード有難うございます。

追加コードの位置はこの位置で宜しいのでしょうか。

IE11ではないことは確認したので、貼っていただいたリンクは今回は使わないで済みそうなのですが、うまく反映されません。

@charset "UTF-8";
.show-subtable-gaia th {
  position: sticky;
  top: 128px; /* 固定位置(メニューバーの縦幅分を考慮)*/
  position: -webkit-sticky;
}
0
Avatar
koichi

nekokoさん

位置はそこで問題ないのですが、反映されないとなると別の問題がありそうです。

ちなみに詳細画面=レコード保存後の画面で合っていますか?

もし編集画面もでしたら以下に変更してみてください。

.show-subtable-gaia th, .edit-subtable-gaia th {
position: sticky;
position: -webkit-sticky;
top: 128px; /* 固定位置(メニューバーの縦幅分を考慮)*/
z-index: 1;
}

 

また、サブテーブルで合っていますか?(関連テーブルでなく)

 

koichiにより編集されました
1
Avatar
nekoko

koichi様

ご教示ありがとうございます。

確認したところ適用しないにチェックが入っていました。

お手数おかけしてすみません。細かく丁寧にご教示して頂きありがとうございます。

1
Avatar
koichi

nekokoさん

JSEditプラグインの設定のところですね。

解決されたようで良かったです!

1
Avatar
nekoko

koichi様

おっしゃる通りプラグインのところです。

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

1
サインインしてコメントを残してください。