border-collapse

<< table-layout border-spacing >>

Esta propiedad indica si los bordes de las celdas deben estar pegados entre sí o separados como en HTML por defecto, por ejemplo. Sus valores son:

separate: Opción por defecto. Cada celda tendrá su propio borde separado del resto (se debe definir un borde para la tabla y las celdas en este caso), y a su vez el borde que rodea la tabla también estará separado y será independiente. del resto
collapse: Con esta opción se crea un efecto muy parecido al atributo cellspacing="0" de HTML, ya que los bordes de la celda quedan “pegados" entre sí, y a su vez con el borde de la tabla. En este caso no hace falta poner un borde a la tabla, pero si le ponemos un borde diferente al de las celdas, se dibujará en el contorno el de más grosor (el de las celdas o el de la tabla) . A igual grosor, se dibujará encima el borde de las celdas.

table {
    /* table-layout: fixed; */
    table-layout: auto; /* default */
    width: 120px;
    border: 1px solid red;
    border-collapse: separate; /* default */
    /* border-collapse: collapse; */
  }
  table td {
    border: solid 3px;
    border-color: orange red green blue;
  }

<< table-layout border-spacing >>