Si bien esto parece ser algo sencillo, es algo que habitualmente me preguntan, es por ello que he decidido escribir sobre este tema.
En Apex 5 podemos hacer uso del Identificador Estático de la columna del Informe Interactivo (IR) para indicarle el ancho fijo de la columna con CSS.
Por ejemplo tenemos un IR de una tabla, el cual tiene un campo con mucho texto, como vemos en la siguiente imagen:
Si nosotros quisiéramos que la columna de Observaciones tenga un ancho fijo más pequeño que el que está usando ahora, necesitamos primero colocar el Identificador Estático en la columna: observaciones
Colocamos la siguiente regla de CSS en propiedades de la página:
CSS --- En Línea:
th#observaciones,td[headers="observaciones"] {
width: 30%;
}
En la cual estamos indicando que tanto el encabezado (th = es una celda que agrega negrita al texto contenido) como las celdas de la columna (td = es una celda normal que no modifica el texto contenido) tengan un ancho de 30%.
Para que quede más claro, veamos un ejemplo de una tabla HTML en el cual usamos las celdas th para las cabeceras y las celdas td para el resto de las celdas. Cada fila tr contiene varias celdas td que representan las columnas.
<HTML>
<HEAD>
<TITLE>Tablas HTML</TITLE>
</HEAD>
<BODY>
<H1>Mi Ejemplo</H1>
<TABLE BORDER="1">
<TR>
<TH>Encabezado 1</TH>
<TH>Encabezado 2</TH>
<TH>Encabezado 3</TH>
</TR>
<TR>
<TD>Dato A</TD>
<TD>Dato B</TD>
<TD>Dato C</TD>
</TR>
<TR>
<TD>Dato D</TD>
<TD>Dato E</TD>
<TD>Dato F</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ahora bien si tenemos más de un informe interactivo en la página necesitamos colocar también el Identificador Estático del IR en el CSS, si por ejemplo lo llamamos IRID nuestra CSS sería:
#IRID th#observaciones,
#IRID td[headers=observaciones]{
width:30%
}
De ese modo podemos determinar el ancho fijo para cada columna que necesitemos.
Cabe aclarar que podemos usar cualquier unidad, ya sea píxeles, ems y porcentajes.
Además de las propiedades height y width, disponemos de las propiedades min-width / min-height y max-width / max-height que representan el mínimo y máximo. Es muy conveniente el uso de estas propiedades cuando se quiere hacer un diseño responsive y que se adapte a los dispositivos móviles. La única consideración es que estas propiedades no están soportadas en IE 7 y 6.