2021/04/30

MANUAL

FAQ:サンプルコード:一覧画面の列の幅を調整したい

## 概要 スタイル機能を用いて列の幅を指定の幅に変更できます。 ## 設定手順 1.対象のテーブルを開きます。 2.「管理」→「[テーブルの管理](/manual/table-management)」をクリックします。 3.「[スタイル](/manual/table-management-style)」タブを開きます。 4.「+新規作成」ボタンをクリックし、ダイアログを表示します。 5.タイトルに「一覧画面の列の幅を調整」等の任意のタイトルを入力します。 6.スタイルに列の幅を調整するスタイルを入力します。 ※以下、例としてタイトル列の幅を「100px」に調整します。 ##### CSS ``` [data-name="TitleBody"] { width: 100px; } ``` ※"TitleBody"部分はth要素のdata-name名を指定しています。他の列の幅を調整する際はそれぞれのdata-name名に置き換えてください。 「タイトル」や「内容」等の複数行テキストの項目の場合は、項目の内側の要素の幅も調整する必要があります。 デフォルトの最小幅は200pxとなっているため、この指定を解除することで200px未満の幅指定が可能です。 ##### CSS ``` .grid-title-body { min-width:0; } ``` 7.出力先の「全て」のチェックを外し、「[一覧](/manual/table-management-grid)」にチェックします。 8.ダイアログの変更ボタンをクリックします。 9.画面下部の更新ボタンをクリックします。 10.対象のテーブルの一覧画面を開き、列の幅を確認します。
このページをシェアする