Chuleta de trucos CSS

Esto son unos cuantos trucos CSS que seguro que nos librarán de sufrir unos cuantos dolores de cabeza.

1. Cambiar cellpadding y cellspacing en tablas mediante CSS

Aquí vemos cómo manipular mediante CSS las propiedades más utilizadas de las tablas, con el fin de evitar el desagradable borde que presenta la tabla HTML

Cambiando cellpadding y cellspacing en tablas

Para eliminar el borde, y simular cellpadding=0 y cellspacing=0 y poner un borde solamente externo tendríamos que aplicar esto (tabla 2):

table { border-collapse:collapse; border:1px solid gray; }
td { padding:10px; }

También podemos poner borde a todas las celdas (tabla 3) añadiendo border:1px solid gray; a la etiqueta td (tabla 3)
Nota: border-spacing no es soportado por IE

2. Hacer que un DIV de anchura X se expanda debido al contenido

Imaginad que tenemos un contenedor DIV con una anchura X y que dentro existe contenido que tiene un ancho superior a X. Pues bien, con CSS no se puede hacer que la capa DIV contenedora se expanda en función de su contenido (por lo menos yo no conozco la forma). Si preveemos que el ancho del contenido pueda superar el de su contenedor habría que usar una tabla de 1 fila y 1 columna (sí, lo siento) ya que estas sí se expanden dinámicamente en función de su contenido.