データ グリッドの列幅をカスタマイズする

このチュートリアルでは、データ グリッドの最後の列の幅を変更する方法について説明します。

前提条件: このチュートリアルの手順を実行するには、データ テーブルを作成します。テーブルの最終列のコンテンツが 5 ~ 6 ワードを超えるようにしてください。

1. ワークフローに [データ テーブルを構築] アクティビティを追加します。
2. データ テーブルを構築ウィザードを開き、必要な列をテーブルに追加します。
   メモ： 列にはスペースや特殊文字が含まれないようにしてください。後でこれらの名前を使用して、[プロパティ名] からフォーム内の列をリンクするためです。
3. データ テーブルを変数に保存します。この例では、dataTable という名前を付けることができます。
   
   

   

   
   

1. フォームにデータ グリッドを追加し、コンポーネントのプロパティ名として DataTable 型変数 (dataTable) を使用します。
2. データ テーブル内の列とその値に従って、データ グリッドにコンポーネントを追加します。これらのコンポーネントのプロパティ名は、データ テーブルの列の正確な名前です。
   この例では、3 つのテキスト フィールド コンポーネントを追加します。コンポーネントには、プロパティ名 column1、column2、column3 を使用します。
3. フォームの [プロパティ] パネルの [カスタム CSS] フィールドに、以下のコードを入力します。

   .mygrid tbody>tr>:nth-child(1){ 
   width: 25%;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }

   メモ: nth-child 要素は、グリッド コンポーネントの列を表します。
4. データ グリッド コンポーネントを編集します。[表示] タブの [カスタム CSS] で、mygrid CSS クラスを入力します。
   コンポーネントとフォームを保存します。これにより、3 列目の幅が広くなり、コンテンツの長さが約 5 ~ 6 ワードを超える長さになります。