border-spacing
Esta propiedad sólo tiene sentido cuando tenemos separados los bordes de las celdas, es decir, border-collapse: separate;. Esta propiedad indica la distancia a la que estarán unos bordes de otros (unas celdas de otras).
- Tamaño en píxeles u otra medida soportada por CSS del espacio entre celdas. Si ponemos sólo un valor, por ejemplo: border-spacing: 5px;, indicamos tanto el espacio horizontal como el vertical. Si queremos poner un espacio diferente para el eje vertical y para el horizontal, se deben poner los 2 valores seguidos y separados por un espacio. Ejemplo: border-spacing: 5px 2px; (5 píxeles horizontalmente y 2 verticalmente).
table {
/* table-layout: fixed; */
table-layout: auto; /* default */
width: 120px;
border: 1px solid red;
border-collapse: separate; /* default */
/* border-collapse: collapse; */
border-spacing: 5px /* 7px */;
}
table td {
border: solid 3px;
border-color: orange red green blue;
}