Personalizar el ancho de columna en cuadrícula de datos

Este tutorial muestra cómo modificar el ancho de la última columna en una cuadrícula de datos.

Requisitos previos: para seguir los pasos de este tutorial, cree una tabla de datos. Asegúrese de que la última columna de la tabla tenga un contenido de más de cinco a seis palabras.

1. Añade una actividad Crear tabla de datos en tu flujo de trabajo.
2. Abre el asistente Crear tabla de datos y añade las columnas deseadas para tu tabla.
   Nota: Asegúrate de que las columnas no tengan espacios ni caracteres especiales, ya que más adelante utilizarás estos nombres para vincular las columnas del formulario a través de los Nombres de propiedad.
3. Guarda la tabla de datos en una variable. En este ejemplo, puedes nombrarlo dataTable.
   
   

   

   
   

1. Añade una cuadrícula de datos a tu formulario y utiliza el nombre de la variable de la tabla de datos (dataTable) como nombre de propiedad del componente.
2. Añadir componentes a la cuadrícula de datos, de acuerdo con las columnas y sus valores en la tabla de datos. Los nombres de propiedad de estos componentes son los nombres exactos de las columnas de la tabla de datos.
   Para este ejemplo, añade tres componentes de campo de texto . Utiliza los siguientes nombres de propiedad para los componentes: column1, column2y column3.
3. En el panel Propiedades del formulario, introduce el siguiente código en el campo CSS personalizado :

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

   Nota: El elemento nth-child representa una columna en el componente de la cuadrícula.
4. Edite el componente Cuadrícula de datos . En la pestaña Visualización , en CSS personalizadointroduce la clase CSS mygrid .
   Guarda el componente y el formulario. Esto da como resultado una tercera columna más amplia, donde el contenido tiene más de cinco a seis palabras aproximadamente.