一覧画面の列の幅を調整したい

回答¶

バージョン1.4.20.0以降はセルの横幅で設定可能です。それより前のバージョンはスタイルを使用します。

概要¶

バージョン1.4.20.0以降はセルの横幅で設定可能です。それより前のバージョンはスタイルを使用します。

制限事項¶

バージョン1.4.20.0以降では、スタイルを使った変更よりも、セルの横幅の変更が優先されます。

セルの横幅を使った操作手順（バージョン1.4.20.0以降）¶

1. 対象のテーブルを開きます。
2. 「管理」→テーブルの管理をクリックします。
3. 一覧タブをクリックします。
4. 現在の設定リストで、幅を調整したい項目をクリックし、リスト上部の詳細設定ボタンをクリックします。
5. セルの横幅にピクセル数を入力します。
6. 変更ボタンをクリックします。
7. コマンドボタンエリアの更新ボタンをクリックします。
8. 対象テーブルの一覧画面を開き、列の幅を確認します。

スタイルを使った操作手順（バージョン1.4.20.0より前）¶

1. 対象のテーブルを開きます。
2. 「管理」→テーブルの管理をクリックします。
3. スタイルタブを開きます。
4. 「＋新規作成」ボタンをクリックし、ダイアログを表示します。
5. タイトルに「一覧画面の列の幅を調整」等の任意のタイトルを入力します。
6. スタイルに列の幅を調整するスタイル（下記、スタイルの例をご覧ください）を入力します。
7. 出力先の「全て」のチェックを外し、一覧にチェックします。
8. ダイアログの追加ボタンをクリックします。
9. コマンドボタンエリアの更新ボタンをクリックします。
10. 対象のテーブルの一覧画面を開き、列の幅を確認します。

スタイルの例（CSS）¶

table {
  table-layout: fixed;
  width: 80%;     /* 表全体の横幅を指定。ウィンドウ全体なら100% */
}

th[data-name="Title"]        {width: 35%;} /* タイトル列の横幅  */
th[data-name="ClassA"]       {width: 10%;} /* 分類A列の横幅     */
th[data-name="NumA"]         {width:  5%;} /* 数値A列の横幅     */
th[data-name="DateA"]        {width: 15%;} /* 日付A列の横幅     */
th[data-name="DescriptionA"] {width: 25%;} /* 説明A列の横幅     */
th[data-name="CheckA"]       {width:  5%;} /* チェックA列の横幅 */

関連情報¶

テーブルの管理：一覧画面：項目の詳細設定：セルの横幅