⇪

Bordes de tabla

facebook-svg gplus-svg twitter-svg

Podemos utilizar para los bordes de tabla todas las propiedades de los bordes como border-width, border-style, border-color, e incluso border-radius y border-image
Además las tablas utilizan las propiedades border-collapse y border-spacing utilizadas solo para elementos de tabla:

La propiedad border-collapse

La propiedad border-collapse establece si las celdas adyacentes de una tabla <table> comparten el mismo borde ( collapsed ) o no ( separate ).

border-collapse: collapse | separate

Cuando border-collapse: collapse; las propiedades border-spacing, border-radius y border-image no tienen ningún efecto. Es necesario establecer border-collapse: separate; para que estas propiedades tengan efecto.

La propiedad border-spacing

La propiedad border-spacing controla la separación de los bordes en una tabla <table> con bordes separados border-collapse: separate.

border-spacing: longitud

El espaciado de borde border-spacing puede tomar uno o dos valores:


  border-spacing: 1em;

  /*horizontal: 1em | vertical: 2px*/
  border-spacing: 1em 2px;

Vea este ejemplo en CodePen donde estoy utilizando las propiedades border-radius y border-image para elementos de tabla:

See the Pen border-collapse*** by Gabi (@enxaneta) on CodePen.