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).
<h4>Tabla con border-collapse: collapse</h4>
<table class="mi-tabla tabla-collapse">
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop Modelo X</td>
<td>€950</td>
</tr>
<tr>
<td>Monitor Curvo 27"</td>
<td>€320</td>
</tr>
</tbody>
</table>
<h4>Tabla con border-collapse: separate</h4>
<table class="mi-tabla tabla-separate">
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop Modelo X</td>
<td>€950</td>
</tr>
<tr>
<td>Monitor Curvo 27"</td>
<td>€320</td>
</tr>
</tbody>
</table>