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.

2 comentarios:

Pedr0Isen dijo...

Excelentisimo Blog!, me ha gustado mucho tu blog, me la he pasado un buen rato leyendote, ojala hagas más post asi de buenos, mira ahy te dejo un par de links con mis blogs, y haber si comentas algo o como lo encuentras...

enigmas y pj64

Saludos.

Rolando Cruz Varona dijo...

Hermano me ha salvado la vida con esto:
white-space: nowrap;
width: 1px;

Gracias