自定义数据网格中的列宽

本教程演示如何修改 数据网格中最后一列的宽度。

先决条件：要执行本教程中的步骤，请创建一个数据表。 确保表格最后一列的内容长度超过 5 到 6 个单词。

1. 在工作流中添加“ 构建数据表” 活动。
2. 打开“ 构建数据表 ”向导，然后为表添加所需的列。
   注意： 确保列中没有空格或特殊字符，因为稍后您将使用这些名称通过 属性名称来链接表单中的列。
3. 将数据表保存到变量中。 对于此示例，您可以将其命名为 dataTable。
   
   

   

   
   

1. 在表单中添加一个 数据网格 ，然后使用数据表变量的名称 (dataTable) 作为组件的 属性名称 。
2. 根据数据表中的列及其值，将组件添加到 数据网格中。 这些组件的 属性名称 是数据表中列的确切名称。
   在此示例中，添加三个 文本字段 组件。 对组件使用以下 属性名称 ： 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 类。
   保存组件和表单。 这将产生更宽的第三列，其中内容长度大约为五到六个单词。