Artículos
CSS

Colapsar bordes en una tabla HTML

11/Jun/2015

Cuando creamos una tabla HTML en una página web, estas, por defecto tienen un modelo de bordes independiente, es decir, podríamos modificar el contenido de los bordes de cada una de las celdas sin que las otras celdas se viesen afectadas. Si bien podemos colapsar bordes en una tabla HTML para que las celdas pasen a compartir los bordes.

Pero para explicar esto una imagen vale más que mil palabras. Si definimos una tabla HTML directamente, el aspecto en el navegador será el siguiente:

tabla-no-colapsada

Como podemos apreciar hay una separación entre las diferentes celdas que hace que a la hora de darle un color a una fila quede un aspecto poco deseado. Esto sucede debido al modelo de bordes, el cual es separado.

Para conseguir que las celdas aparezcan agrupadas y así dar el color a una fila parezca más homogéneo lo que deberemos hacer es colapsar bordes en una tablaHTML.

Si queremos conseguir colapsar bordes en una tabla HTML deberemos de jugar con el atributo CSS border-collapse. Este valor puede recibir dos valores, por defecto tiene asociado el valor separate que es el que indica que el modelo de bordes es separado. El otro valor será collapse. Esto hará que los bordes de la tabla se colapsen y de esta forma consigamos el efecto comentado anteriormente.

Para poder fijar el atributo border-collapse deberemos de crear el siguiente estilo.

table {
  border-collapse: collapse;
}

Como podemos ver el atributo border-collapse lo establecemos a nivel de la tabla.

Código Fuente

Descárgate el código fuente de Colapsar bordes en una tabla HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
1 Comentario
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios