La propiedad border-spacing se usa para establecer la distancia entre los bordes de las celdas vecinas en la tabla. Esta propiedad solo funciona cuando la propiedad border-collapse se establece en no-collapse por separado.
Valor por defecto:
- 2 píxeles
Sintaxis:
border-spacing: length|initial|inherit;
Valores de propiedad:
- length-length: Se utiliza para establecer la distancia entre los bordes de las celdas adyacentes. No permite valores negativos.
- Si se definen dos valores, el primer valor define el espacio horizontal y el segundo valor define el espacio vertical.
- Si solo se proporciona un valor, define el espacio horizontal y vertical entre los bordes adyacentes de las celdas.
- initial: Establece la propiedad a su valor por defecto.
Sintaxis:
border-spacing:initial;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>border-spacing property</title>
<style>
table,
th,
td {
border: 2px solid green;
text-align: center;
}
#geeks {
border-collapse: separate;
background-color: none;
border-spacing: initial;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2> The border-spacing Property</h2>
<h3>border-spacing: initial;</h3>
<table style="width:70%" id="geeks">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Harsh</td>
<td>Agarwal</td>
<td>15</td>
</tr>
<tr>
<td>Manas</td>
<td>Chhabra</td>
<td>27</td>
</tr>
<tr>
<td>Ramesh</td>
<td>Chandra</td>
<td>28</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad CSS border-spacing se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 8.0
- Firefox 1.0
- Ópera 4.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA