kintone テーブルの各項目横幅調整について

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

 

テーブルにしたい項目を横に複数個並べると、PC画面よりはみ出してしまいます。

なので、各項目の幅を個別でデフォルトより狭く設定したいのですが、

方法はありますでしょうか?

 

現在、レコード参照画面での幅調整は以下のスクリプトにて対応していますが、

レコード編集・追加時においては同じロジックでは変化がありませんでした。

レコード編集・追加時での幅調整方法がありましたら、教えていただけると助かります。

よろしくお願いいたします。

arakakiさん

お世話になっております。サイボウズスタートアップスの武井です。

 

原因はgetFieldElement関数が詳細画面にしか対応していないためです。

DOM操作(※)になるため、あまりお勧めはできませんが、自力でテーブルの要素を取得・指定すれば同様に幅調整することが可能です。

 

※DOM操作はkintoneアップデートのクラス名変更等により動作しなくなる可能性があります。

サイボウズスタートアップス 武井様

お世話になっております。コメントありがとうございます。

DOM操作での設定について、確認してみます。

 

他にも方法がありましたらよろしくお願いします。

arakakiさん

css で、表示幅を変更できます。下記のような指定で項目ごとに指定できます。
subtable-nnnnnn の部分は、DOM上でサブテーブルの class につけられた番号を指定してください。
tr, td とその子要素に表示幅関係の指定がされていますので、それぞれの変更が必要です。
サイズは、表示を見ながら調整してください。
kintoneアップデートのクラス名変更等により動作しなくなる可能性があるのは、同様です。

.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia th:nth-child(1) {
width: 140px !IMPORTANT;
}
.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia th:nth-child(1) * {
min-width: 120px !IMPORTANT;
}
.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia td:nth-child(1) {
max-width: 140px !IMPORTANT;
}
.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia td:nth-child(1) * {
width: 120px !IMPORTANT;
}

.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia th:nth-child(2) {
width: 120px !IMPORTANT;
}
.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia th:nth-child(2) * {
min-width: 110px !IMPORTANT;
}
.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia td:nth-child(2) {
max-width: 120px !IMPORTANT;
}
.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia td:nth-child(2) * {
width: 110px !IMPORTANT;
}

rex0220さん

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

コメントありがとうございます。教えていただいたcssを実施し、うまくいきました。

ありがとうございます。大変助かりました。

 

※メモ書き

tdの下記設定はプルダウン項目のテーブル部分に使用すると、選択ボタンがずれます…

私はうまく扱えなかったので除外して設定しました。

.subtable-gaia.subtable-nnnnnn.edit-subtable-gaia td:nth-child(n) * {
width: XXXpx !IMPORTANT;
}

 

 

 

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。