＜背景・実現したいこと＞
サブテーブルで縦に１カ月分の日付の一覧の入力フォームを作成しました。
しかし表示や、編集入力は、１カ月分の日付が横一列の一覧として使用したいので、「テーブル行列変換プラグイン」を使用し、テーブルの行列を入れ替えた一覧とすることが出来ました。
ですが、レコードの内容の表示画面で、”行列を入れ変えた状態”での列幅が、固定の幅になっており、画像のように横長な表示になってしまいます。表示画面だけでも、列幅を指定して細く表示したいのですが、JSEdit for kintone や、cssで、”テーブルの行列を入れ替えた状態”での列の表示の幅を細くする事は可能でしょうか？
＜やってみた事＞
他の記事「テーブルの各項目横幅調整について」を拝見して、cssにて幅を狭めてみたものの、編集画面の行列を入れ替える前では有効でしたが、行列を入れ替えるとレイアウトが崩れてしまいました。また、編集画面では幅が狭まっても、表示画面では図のように幅広のままでした。
19件のコメント
豊和会 本部さん
こんにちは。
以下で変わりますか？
widthの値はご自由に変更してください。
koichiさん、早速のご教示をありがとうございます。教えて頂いたCSSファイルを作成し、アップロード→保存→アプリの更新、を行ったのですが、幅は変わっておりませんでした。。。私の操作が間違っているのかも知れませんが、画像のような感じで、、、ＣＳＳファイルとしてアップロードするのではなく、このコードをどこかに書き込む必要があるのでしょうか。。。お忙しい中ご回答いただいたのに本当に申し訳ございません。
行列を入れ替えてみても、幅は広いままでした。
表示画面です↓
編集画面です↓
ご確認いただきありがとうございます。
プラグインのCSSの方が優先されて反映できていないですね。
適用方法は問題ございませんので、再度以下に書き換えていただき、設定入れてください。
※以下は詳細画面の行列入替時にのみ列幅が変わります。
以下にすれば、編集画面の行列入替時にも適用できました。
.joyzo-horizontal-subtable tbody tr {width: 100px !important;
}
koichiさん 本当にありがとうございます、幅が細くなりました！本当に本当にありがとうございます、とても嬉しいです。
それで、、わたくしもかなり図々しいのは承知のうえで教えて頂きたいのですが、当初ご教示いただいた通り「列名部分」も、「データ部分」と同じように幅指定することが出来ますでしょうか。。。
反映されて何よりです。
列名については以下でできました。
thead（ヘッダー列）のwidthを変えます。
これだけですとtbody（データ列）との間に隙間ができますので、leftに同じ値を入れて隙間を無くします。
.joyzo-horizontal-subtable thead {
width: 70px !important; /* この値は合わせる */
}
.joyzo-horizontal-subtable tbody {
left: 70px !important; /* この値は合わせる */
}
koichiさん
お忙しい中ご教示を本当にありがとうございます。教えて頂いたコードにて、イメージ通りの画面にする事が出来ました。
とても嬉しいです！
お役に立てて何よりです！
結果の画像もありがとうございます。
koichiさん、、、わたくしこのアプリに関して質問しすぎていて、大変恐縮なのですが、もしもまだお付き合いいただけるなら、もう一つ教えて頂けないでしょうか。。
実は、このテーブルにある「CNT」の列と、「年月日」の列を非表示にしたいのです。
そこで、他の記事「サブテブールのフィールドを非表示したい。」を参考に、下記の構文を書き加えて、行列入れ替え前のテーブルの「CNT」と「年月日」を非表示にすることが出来ました。
（エディターなど全然使えていないのですが、見やすくなればと思いこの画像でございます。。。）
ところが、この構文を書き加えただけでは、行列入れ替え後のテーブルには「CNT」と「年月日」の”列”というか、入れ替え後は”行”が何事もなかったかのように表示されてしまいます。
行列入れ替え後のテーブルにおいても「CNT」の行と「年月日」の行を非表示にすることは可能でしょうか。。
行列入替後はプラグインのCSSの方が優先されるためですね。
その更に上の優先度でCSSを適用する必要があります。
行列入替するとtable要素に「.joyzo-horizontal-subtable」クラスが付きますので
この中の指定行のth、tdを非表示にします。
具体的には以下です。
詳細画面で見た場合のフィールド名の列を含めて9行目、10行目を非表示にする処理です。
「display: none !important;」
この「!important」により強制的に優先度を上げます。
行追加削除ボタンがあるために
詳細画面（.show-subtable-gaia）と編集画面（.edit-subtable-gaia）で行数が変わる点に注意です。
koichiさん
ご回答いただけた事と、その速さに驚きを隠せないです！本当にありがとうございます。早速ながらに、ご教示いただいたCSSで解決出来ました。しかも、行のずれの対処まで教えて頂き、誠にありがとうございます。
koichiさんは只ならぬ知識の持ち主とお見受け致しました。そこで、、、本当に本当に恐縮なのですが、もう一つ、教えて頂けないでしょうか。。。実は、サブテーブルの追加削除ボタンを非表示にしたく、他の記事「サブテーブルの追加削除を制限したい」を参考に、下記のＪＳファイルを作成して取り込みました。そうしたら、行列入れ替え前の追加削除ボタンは非表示になったのですが、行列を入れ替えた後においては、明細の上部分と下部分、両方に出ていた追加削除ボタンの下部分だけが非表示になり、上部分のボタンは表示されたままとなってしまいました。
ＣＳＳはもとより、ＪＳなど到底まだまだこれからのわたくしには解決出来ず、困惑しております。
行列入れ替え後の明細の、上部分の+、-は非表示にするのは難しいでしょうか。。。
いえいえ、私もまだまだ勉強の身ですよ＾＾
記載のJSでも可能ですが、CSSでも可能ですので、とりあえずCSSを載せます。
見覚えありますか？
先ほどと同じで、行番号を変えただけです。
上のボタンは1行目、下のボタンは先ほどの画像ですと12行目に来るはずです（違ったら変えてみてください）。
ちなみに、通常表示で右側に表示されるボタンもCSSで消せます。
.subtable-operation-gaia {display: none;
}
CSSは対象の要素（あるいはその親要素）にどのようなclassやidが付いているかさえ分かれば、あとの処理は比較的容易です。
kintoneの仕様変更や、プラグインの仕様変更が発生してclass名が変わると動かなくなりますので、その点はご注意ください。
koichiさん、もう夕方なのに、お忙しい中ご教示をありがとうございます。そうだったのですね！ｃｓｓで非表示の方法があるのですね、ありがとうございます。早速実践してみたいところなのですが、、、、
わたくし、大変申し上げにくいのですが、一つ前の質問で解決していただいた『編集画面において”ＣＮＴ”列と”年月日”列を、非表示にする』問題において、現在一つ不思議な現象が起きており、頭を悩ませておりまして。。。
と、言いますのも、編集画面において、行列を入れ替えたあと、もう一度”行列入れ替えボタン”で元の横向きテーブルに戻すと、非表示にしたい列が一つずれてしまうのです。。。私がアップしたCSSのファイル画像と、起きている現象の画像を添付致しますので、、、どうかどうかご高覧いただけますでしょうか。。。
これは盲点でした。
一度行列入替すると、通常に戻した後もプラグインで生成された<th>が一番頭に残るようです。
そのため、初回開いたときと、行列入替から戻したときとで、行番号が変わります。
少々厄介ですが、以下に変えます（★が変更になった部分）。
各要素にはシステムが裏で割り振る番号が付いています。
これを直接CSSで指定します（フィールドが変わると番号が変わりますので注意）。
番号はブラウザのデベロッパーツールなどでHTMLを見ていただくと分かります。
koichiさん、おはようございます、引き続きのご回答に心より感謝申し上げます。しかも、私の希望をご理解頂けているので、改善と同時に+、-ボタン非表示も組み込んだｃｓｓをご教示頂き、誠にありがとうございます。
大特急で取り入れてみました！そうしましたら、、テーブルのヘッダーの表示は、行列を何回入れ替えても、完璧に希望通りなのですが、テーブルのデータ部分が以前と同じようになってしまっていて。、。文章で説明出来ないので、スクショを見て頂けますでしょうか。。お忙しい中お時間頂き、本当に本当にありがとうございます。
確認不足でした。。先ほどの投稿は忘れてください。
全文を以下に変えます。
頭（左）から数えるとずれが生じてしまうので、後ろ（右）から数えることにします。
■詳細画面
非表示にしたい列を右から数えて指定してください。
■編集画面
非表示にしたい列を右から数えて指定してください。
ボタンが一番右にあるため、これが(1)です。
■入替後の上のボタン
これは頭から数えて1番目を非表示にします。
koichiさん、すぐにご回答いただいたのに、返信が遅れて申し訳ございません。
ありがとうございます！まさに、全て完璧に動作しております。
イメージ通りのアプリになってとても嬉しいです。
また、いつか別のアプリでわたくしが質問をアップしておりましたら、その時は是非またお力添えを宜しくお願い致します。（最後まで図々しい。。）
ありがとうございました。
無事解決に繋がりまして何よりです。
本件の設定は私自身、勉強になりました。
またお答えできる機会がありましたらよろしくお願いします。
koichiさん
本当に親切な方がいるなと驚いております。そして、、わたくしの新たな投稿「ボタンとして機能しているスペースフィールドの大きさを変更したいのですが」に、もしも目がおとまりになりましたら、、、またご教示いただけますでしょうか。。。。