Die Eigenschaft empty-cells definiert, ob die Ränder und der Hintergrund der Anzeige auf leeren Zellen in einer Tabelle angezeigt werden sollen oder nicht.
Diese Eigenschaft gilt für Tabellen, die den Wert "separate" der Eigenschaft border-collapse haben.
Für die Eigenschaft border-collapse ist der Standardwert "show".
| Anfangswert | show |
| Gilt für | Table-Cell-Eelemente |
| Geerbt | Ja |
| Animierbar | Nein |
| Version | CSS2 |
| DOM Syntax | object.style.emptyCells = "hide"; |
Syntax
empty-cells: show | hide | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.show {
empty-cells: show;
}
.hide {
empty-cells: hide;
}
td, th {
border: 1px solid #1c87c9;
padding: 0.5rem;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft empty-cells</h2>
<p>Hier wird der Wert "show" verwendet: </p>
<table class="show">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
<br>
<p>In der Tabelle wird der Wert "hide" verwendet:</p>
<table class="hide">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
</body>
</html>Ein weiteres Beispiel mit den Werten "hide" und "show":
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.show {
empty-cells: show;
}
.hide {
empty-cells: hide;
}
body {
background: #1c87c9;
padding: 25px 0;
color: #fff;
font-size: 2em;
text-align: center;
}
table {
display: flex;
justify-content: center;
}
td {
background: #fff;
border: 1px solid #8ebf42;
padding: 10px 15px;
color: green;
}
</style>
</head>
<body>
<p>Die leeren Zellen werden angezeigt.</p>
<table class="show">
<tbody>
<tr>
<td>♦</td>
<td></td>
<td>♦</td>
<td>♦</td>
</tr>
</tbody>
</table>
<p>Die leeren Zellen werden ausgeblendet.</p>
<table class="hide">
<tbody>
<tr>
<td>♦</td>
<td></td>
<td>♦</td>
<td>♦</td>
</tr>
</tbody>
</table>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| show | Die Grenzen und der Hintergrund der leeren Zellen werden angezeigt. Das ist der Standardwert dieser Eigenschaft. |
| hide | Die Grenzen und der Hintergrund von leeren Zellen werden nicht angezeigt. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| 1.0+ | 12.0+ | 1.0+ | 1.2+ | 4.0+ |
Übe dein Wissen
Welche Werte kann die CSS-Eigenschaft 'empty-cells' annehmen?
Richtig!
Falsch!