border-collapse

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Resumen

La propiedad border-collapse se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar.

En el modelo de fusión, las celdas adyacentes comparten los mismos bordes

En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del espaciado de borde).

Sintaxis

border-collapse: value

Valores

  • inherit : Define explícitamente el valor como heredada del elemento padre.
  • separate : Utiliza el modo de presentación de separación de borde.
  • collapse : Utiliza el modo de presentación de fusión de borde

Ejemplos

Ver El Ejemplo Vivo

<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">

Notas

En el modelo de fusión, el valor del estilo de borde de inset se comporta como groove, y outset como ridge.

CSS 2 especifica que el valor inicial para esta propiedad es collapse, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera separate.

Especificaciones

Specification
Cascading Style Sheets Level 2
# propdef-border-collapse

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-collapse
collapse
separate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también