empty - cells

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

Коротка інформація

CSS | CSS2
Значення за умовчанням | show
Наслідує | Так
Застосовується | ДО <TD>, <TH> чи до елементів, у яких display: table - cell
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/tables.html#propdef - empty - cells

Опис

Задає відображення меж і фону в осередку, якщо вона порожня. При одночасному додаванні до таблиці властивості border - collapse зі значенням collapse, властивість empty - cells ігнорується.

Осередок вважається порожнім в наступних випадках:

- немає взагалі ніяких символів;
- у осередку міститься тільки переклад рядка, символ табуляції або пропуск;
- значення visibility встановлене як hidden.

Додавання нерозривного пропуску &nbsp; сприймається як видимий зміст, тобто осередок вже буде непорожній.

Синтаксис

empty - cells: show | hide

Значення

show Відображає межу навколо осередку і фон в ній.

hide Межа і фон в порожніх осередках не відображається. Якщо усі осередки в рядку порожні, то рядок ховається цілком.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>empty - cells</title>

<style type="text/css">

TABLE {

border: 4px double #399; /* Межа навколо таблиці */

}

TD {

background: #fc0; /* Колір фону */

border: 1px solid #333; /* Межа навколо осередків */

empty-cells: hide; /* Ховаємо порожні осередки */

padding: 5px; /* Полів в осередках */

}

</style>

</head>

<body>

<table width="100%">

<tr>

<td>Леонардо</td>

<td>5</td>

<td>8</td>

</tr>

<tr>

<td>Рафаель</td>

<td> </td>

<td>11</td>

</tr>

<tr>

<td>Мікеланжело</td>

<td>24</td>

<td> </td>

</tr>

<tr>

<td>Донателло</td>

<td>&nbsp;</td>

<td>13</td>

</tr>

</table>

</body>

</html>

Результат цього прикладу у браузері Opera показаний ні мал. 1. Той же приклад у браузері Internet Explorer продемонстрований на мал. 2.

Мал. 1. Вид таблиці у браузері Opera 9.62

Браузери

Internet Explorer до сьомої версії включно не підтримує властивість empty - cells і відображає порожні осередки завжди так, немов для них встановлене empty - cells: hide.

Firefox версії 2 і нижче (а також Netscape) не ховає рядок таблиці, якщо для усіх осередків задане empty - cells: hide і осередки порожні.

Браузер Opera до версії 9.27 включно не приховує рядок таблиці і для порожніх осередків відображає колір фону.