Eigenschaft border-spacing

Die Eigenschaft border-spacing legt den Abstand zwischen den Zellen td oder den Zellen th einer HTML Tabelle (und zwischen dem Zellenrand und der Tabelle selbst) fest. Als Wert der Eigenschaft dienen alle Größeneinheiten, außer Prozent.

Syntax

Selektor {
	border-spacing: ein oder zwei Werte;
}

Werte

Wert	Beschreibung
ein Wert	Ein Wert legt gleiche Abstände zwischen den Zellen sowohl vertikal als auch horizontal fest.
zwei Werte	Der erste Wert legt den horizontalen Abstand fest, der zweite Wert den vertikalen Abstand.

Standardwert: 0. Allerdings hat jeder Browser seinen eigenen, nicht Null betragenden Standardwert für das Attribut cellspacing, daher werden Sie standardmäßig Abstände zwischen den Zellen sehen.

Anmerkungen

Wenden Sie die Eigenschaft auf Tabellen an, nicht auf deren Zellen (für Zellen funktioniert sie nicht).

Ein ähnlicher Effekt kann nicht mit margin erzielt werden, da margin für Tabellenzellen nicht funktioniert.

Wenn die Eigenschaft border-collapse auf den Wert collapse gesetzt ist - wird border-spacing nicht funktionieren.

Beispiel . Ein Wert

Lassen Sie uns Abstände zwischen den Zellen (und zwischen der Zelle und dem Tabellenrand) von 10px setzen:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Beispiel . Zwei Werte

Und jetzt setzen wir die horizontalen Abstände auf 10px und die vertikalen auf 30px:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Beispiel . border-collapse: collapse setzen

Hier jedoch wird border-spacing nicht funktionieren, aufgrund der Eigenschaft border-collapse mit dem Wert collapse:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}