martes, 28 de febrero de 2012

Una celda de tabla que se ajusta al contenido

Estoy diseñando una interfaz de backend en la que necesito que una columna de una tabla contenga varios botones de acciones que se pueden realizar con el registro correspondiente. En cada tabla puede haber distinto número de acciones (que son enlaces) y quiero que la columna ocupe tan sólo el espacio necesario para mostrar todos los botones.


Pues bien, es bastante sencillo.
Éste es el código CSS para la celda que contiene las acciones (tiene la clase actions). Ten en cuenta que las acciones son simplemente elementos A seguidos.:


.actions {
white-space: nowrap;
width: 1px;
}

La primera propiedad white-space: nowrap; hace que no se salte automáticamente de línea por la separación de los textos cuando no hay anchura suficiente para mostrarlas todas.
La segunda width: 1px; garantiza que el ancho de la celda es menor que cualquiera posible del contenido, pero como la anterior hace que el conjunto de etiquetas A se mantenga en la misma línea la celda se ve forzada a aumentar su tamaño para abarcarlas todas (es algo propio de la propiedad display: table-cell que tienen las TD por defecto).
El resultado es que la columna para las acciones se adapta automágicamente al contenido, sin saltos de línea.