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.
.mi-tabla {
width: 100%;
border-collapse: collapse; /* Los bordes se fusionan en uno solo */
table-layout: auto; /* Puedes cambiarlo a 'fixed' y el efecto del borde será el mismo */
}
.mi-tabla th, .mi-tabla td {
border: 2px solid dodgerblue; /* Borde de 2px para que se note bien */
padding: 8px;
text-align: left;
}