新規投稿
フォローする

サブテーブルの行追加・行削除ボタン位置の変更について

初心者でうまくCSSを使いこなせないので、アドバイスを頂けると助かります。

あるアプリ内で、幅の違うサブテーブルを2つ使用しているのですが、
1つのサブテーブルの幅が長く、右スクロールするのが手間なので、画面左側に行追加・行削除の「+」「-」ボタンを
移動させたいと思っております。

色々カスタマイズフォーラムを調べていくなかで、以下の対応を見つけ対応したところ、
2つのサブテーブルとも、行追加・行削除の「+」「-」ボタンが画面左側に移動してしまいます。

https://developer.cybozu.io/hc/ja/community/posts/202807564-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E8%A1%8C%E8%BF%BD%E5%8A%A0%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%AB%E3%81%A4%E3%81%8D%E3%81%BE%E3%81%97%E3%81%A6

.subtable-gaia th.subtable-operation-gaia, .subtable-gaia td.subtable-operation-gaia {
position: absolute;
margin-left: -1980px;
}

1つのサブテーブルだけ、行追加・行削除の「+」「-」ボタンを画面左側に移動することは可能でしょうか?
もし移動できるなら、どのような方法があるのか教えていただけますでしょうか。

宜しくお願いいたします。

0

2件のコメント

Avatar
koichi

t.satoさん

こんにちは。

 

HTML上ではフィールドのclassに番号が付いていますので、そちらをCSSで指定すると良いです。

以下の場合、「.subtable-row-6376589」が下のテーブルを示しています。

※番号はアプリにより異なりますので、ChromeデベロッパーツールなどでHTMLをご確認ください。

.subtable-row-6376589 th.subtable-operation-gaia, .subtable-row-6376589 td.subtable-operation-gaia {
position: absolute;
margin-left: -1980px;
}

1
Avatar
t.sato

koichiさん

先日に引き続きありがとうございます!

なるほど、ディベロッパーツールでフィールドのClass番号を確認し、お教えいただいた形で指定するのですね。
早速実装させていただき対応することができました。大変勉強になりました、ありがとうございます。

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