jueves, 28 de mayo de 2009

CSS - Quitar el espacio entre celdas

Se dice constantemente que el uso de tablas no es recomendado, pero también hay que reconocer que a veces son necesarias,
por ejemplo cuando quiero crear un formulario con abundantes controles... es la mejor forma de mostrarlo de manera ordenada y alineada, sin descuidar la presentación, y con un poquito de estilos css, se ven muy bien.

Vamos a ver un ejemplo chiquitito:
Si mostramos una tabla tal como es (sin estilos) no se ve muy agradable, así que vamos a pintarle los bordes de
rojo por ejemplo. Para ellos usamos el sgte css:
table
{
border: 1px solid red;
}
td
{
background-color: Lime;
border: 1px solid red;
}

Observen el espacio entre celdas, ami no me gusta... para quitarlo, simplemente le añadimos al elemento table lo sgte:
border-collapse: collapse;

con lo que el estilo quedaría así:
table
{
border: 1px solid red;
border-collapse: collapse;
}
td
{
background-color: Lime;
border: 1px solid red;
}

Y quedaría así:

;)

2 comentarios:

SombraDeCulto dijo...

WoW el collapse... me ayudaste un monton!!! Saludos

Yairu. ヤイル dijo...

Suuper!! Muchas gracias! Me ayudastes con el collapse vigente en el 2018, jejeje