border-spacing

<< border-collapse empty-cells >>

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;
  }

<< border-collapse empty-cells >>