Vlastnosť empty-cells

Vlastnosť empty-cells určuje prehliadaču, ako zobrazovať pozadie a ohraničenie prázdnych buniek td alebo buniek th HTML tabuľky: zobrazovať alebo nie.

Bunka sa považuje za prázdnu v nasledujúcich prípadoch: nie sú v nej žiadne znaky, bunka obsahuje iba medzeru (jednu alebo viac), znak konca riadka alebo tabulátor, alebo ak je vlastnosť visibility nastavená na hidden.

Ak chceme, aby bunka nebola prázdna, ale zároveň bez viditeľného textu, používa sa nasledujúci trik: do bunky sa vloží nezlomitelná medzera  .

Vlastnosť nefunguje, ak je nastavená vlastnosť border-collapse na hodnotu collapse.

Syntax

selektor {
	empty-cells: show | hide;
}

Hodnoty

Hodnota	Popis
`show`	Pozadie a ohraničenie sa zobrazujú pre prázdnu bunku.
`hide`	Pozadie a ohraničenie sa nezobrazujú pre prázdnu bunku.

Predvolená hodnota: show.

Príklad . Hodnota show

Teraz má tabuľka niektoré bunky prázdne, ale aj tak majú ohraničenie a pozadie:

<table>
	<tr>
		<td>bunka</td>
		<td></td>
		<td>bunka</td>
	</tr>
	<tr>
		<td></td>
		<td>bunka</td>
		<td></td>
	</tr>
	<tr>
		<td>bunka</td>
		<td>bunka</td>
		<td>bunka</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: show;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

Príklad . Hodnota hide

A teraz prázdne bunky nebudú mať pozadie a ohraničenie:

<table>
	<tr>
		<td>bunka</td>
		<td></td>
		<td>bunka</td>
	</tr>
	<tr>
		<td></td>
		<td>bunka</td>
		<td></td>
	</tr>
	<tr>
		<td>bunka</td>
		<td>bunka</td>
		<td>bunka</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: hide;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

Pozri tiež

pseudotrieda empty,
ktorá určuje vzhľad prázdneho elementu