CSS border-spacing-Eigenschaft
Die CSS border-spacing-Eigenschaft legt den Abstand zwischen den Rändern benachbarter Tabellenzellen fest. Diese Eigenschaft gilt nur, wenn border-collapse den Wert separate hat. Diese Eigenschaft wird ignoriert, wenn das Modell für zusammenfallende Ränder verwendet wird.
Die border-spacing-Eigenschaft gilt für HTML-Elemente, die mit dem Modell für getrennte Ränder gerendert werden. Sie bestimmt den Abstand zwischen den Zellen, da die einzelnen Ränder der Zellen einer Tabelle, die vom Modell für getrennte Ränder gerendert wird, nicht gemeinsam genutzt werden.
border-spacing kann mit einem oder zwei Längenwerten definiert werden. Wenn zwei Werte angegeben werden, legt der erste den horizontalen Abstand fest und der zweite den vertikalen Abstand. Wenn nur ein Wert angegeben wird, werden sowohl der horizontale als auch der vertikale Abstand auf diesen Wert festgelegt. Negative Werte sind nicht erlaubt.
| Anfangswert | 0 |
|---|---|
| Gilt für | Die table- und Inline-Tabellenelemente. |
| Vererbbar | Nein |
| Animierbar | Ja. Der Abstandswert ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | object.style.borderSpacing = "10px"; |
Syntax
Syntax der CSS border-spacing-Eigenschaft
border-spacing: length | initial | inherit;Beispiel für die border-spacing-Eigenschaft mit einem Wert:
Beispiel für die CSS border-spacing-Eigenschaft mit nur einem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
.table {
border-collapse: separate;
border-spacing: 20px;
}
</style>
</head>
<body>
<h2>Example of border-spacing: 20px;</h2>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Mary</td>
<td>Peterson</td>
</tr>
<tr>
<td>Maxim</td>
<td>Brown</td>
</tr>
</table>
</body>
</html>Ergebnis
Hier ist ein weiteres Beispiel mit zwei Werten. Der erste Wert legt den horizontalen Abstand fest und der zweite den vertikalen Abstand.
Beispiel für die border-spacing-Eigenschaft mit zwei Werten:
Beispiel für die CSS border-spacing-Eigenschaft mit zwei Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-spacing: 20px 30px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Nun wollen wir dem Tabellenbeispiel oben etwas Styling geben. Fügen wir beispielsweise background-color hinzu. Diese Eigenschaft legt die Hintergrundfarbe eines Elements fest.
Beispiel zur Verwendung der border-spacing-Eigenschaft mit der background-color-Eigenschaft:
Beispiel für die CSS border-spacing-Eigenschaft mit der background-color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
.table {
border-collapse: separate;
border-spacing: 20px;
background-color: #eee;
}
</style>
</head>
<body>
<h1>Example of border-spacing: 20px;</h1>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Mary</td>
<td>Peterson</td>
</tr>
<tr>
<td>Maxim</td>
<td>Brown</td>
</tr>
</table>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| length | Gibt den Abstand zwischen Zellen in px, em usw. an. | Testen » |
| initial | Setzt diese Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt diese Eigenschaft von ihrem übergeordneten Element. |
Übung
Welche Funktion hat die 'border-spacing'-Eigenschaft in CSS?