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

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

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

1. ワークフローに [データ テーブルを構築] アクティビティを追加します。

2. データ テーブルを構築ウィザードを開き、必要な列をテーブルに追加します。

   注:

   列にはスペースや特殊文字が含まれないようにしてください。後でこれらの名前を使用して、[ プロパティ名] からフォーム内の列をリンクするためです。

3. データ テーブルを変数に保存します。この例では、dataTable という名前を付けることができます。

   

4. フォームにデータ グリッドを追加し、コンポーネントのプロパティ名として DataTable 変数 (dataTable) の名前を使用します。

5. データ テーブル内の列とその値に従って、 データ グリッドにコンポーネントを追加します。これらのコンポーネント のプロパティ名は 、データ テーブルの列の正確な名前です。

   この例では、3 つの テキスト フィールド コンポーネントを追加します。コンポーネントには、 プロパティ名 column1、 column2、 column3を使用します。

6. フォームの [プロパティ] パネルの [カスタム 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要素は、グリッド コンポーネントの列を表します。

7. データ グリッド コンポーネントを編集します。[表示] タブの [カスタム CSS] で、mygrid CSS クラスを入力します。コンポーネントとフォームを保存します。その結果、幅の広い 3 番目の列が作成され、コンテンツは約 5 語から 6 語よりも長くなります。