empty-cells у CSS — межі й тло порожньої комірки таблиці
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
При одночасному додаванні до таблиці властивості
автор: Svitlanaborder-collapseіз значенням collapse, властивістьempty-cellsігнорується.
Синтаксис
empty-cells: show|hide|initial|inherit;Властивість empty-cells може отримувати 4 значень:
-
show -
Без задання. Відображає рамку навколо порожньої клітинки і фон в ній.
автор: Svitlana -
hide -
Рамка та фон в порожніх клітинках не відображається. Якщо всі клітинки в рядку порожні, то рядок ввесь ховається.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | show |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.emptyCells="hide" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1.2 | 4 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Обидві таблиці мають порожню комірку: у верхній hide ховає її рамку, у нижній show (типово) — малює.
HTML
<table class="hide">
<tr><td>hide</td><td></td></tr>
</table>
<table class="show">
<tr><td>show</td><td></td></tr>
</table>CSS
table {
border-collapse: separate;
margin-bottom: 12px;
}
td {
border: 1px solid #0172ad;
padding: 6px;
min-width: 60px;
}
.hide { empty-cells: hide; }
.show { empty-cells: show; }Дві однакові таблиці підряд: перша з empty-cells: show, друга з hide. У кожній шість комірок — з текстом, зовсім порожня, з самими пробілами, з нерозривним пробілом, із прихованою дитиною й із visibility: hidden на самій комірці. Видно, що hide прибирає лише перші дві: нерозривний пробіл і прихована дитина рахуються за вміст. Пунктирна напрямна показує, що розміри в обох таблицях однакові. Третя таблиця — та сама з border-collapse: collapse: там hide не робить нічого.
HTML
<p class="cap">empty-cells: show — типове:</p>
<table class="t show">
<tr>
<td>текст</td>
<td></td>
<td> </td>
<td> </td>
<td><span class="vh">X</span></td>
<td class="vh">Y</td>
</tr>
</table>
<p class="cap">empty-cells: hide — зникли лише дві перші порожні:</p>
<table class="t hide">
<tr>
<td>текст</td>
<td></td>
<td> </td>
<td> </td>
<td><span class="vh">X</span></td>
<td class="vh">Y</td>
</tr>
</table>
<p class="legend">колонки: текст · порожня · самі пробіли · нерозривний пробіл · прихована дитина · прихована комірка</p>
<p class="cap">border-collapse: collapse — hide не діє зовсім:</p>
<table class="t hide coll">
<tr>
<td>текст</td>
<td></td>
<td>текст</td>
</tr>
</table>CSS
.cap {
margin: 20px 0 8px;
max-width: 620px;
font: 600 .9em/1.45 system-ui, sans-serif;
color: #5a6472;
}
.legend {
margin: 8px 0 0;
max-width: 620px;
font: .78em/1.4 system-ui, sans-serif;
color: #8a94a6;
}
.t {
border-collapse: separate;
border-spacing: 6px;
outline: 1px dashed #b9c6d8;
font: 13px/20px system-ui, sans-serif;
}
.t td {
width: 70px;
padding: 6px;
background: #f2b134;
border: 5px solid #c0392b;
}
.show {
empty-cells: show;
}
.hide {
empty-cells: hide;
}
.coll {
border-collapse: collapse;
}
.coll td {
border-color: #2f6fd0;
}
.vh {
visibility: hidden;
}Динамічний приклад
HTML
<table cellspacing="0" id="table">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td></td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
<tr>
<td>Клітинка</td>
<td></td>
<td>Клітинка</td>
</tr>
</table>
<p>Натисність на кнопку, щоб побачити як змінюється візуалізація таблиці при різних значеннях властивості.</p>
<button id="b" data-ec="hide">TOGGLE EMPTY-CELLS</button>CSS
body {
text-align: center;
padding-top: 20px;
}
table {
border: solid 1px black;
border-collapse: separate;
border-spacing: 5px;
width: 500px;
margin: 0 auto;
empty-cells: hide;
font-size: 18px;
}
th, td {
text-align: center;
border: solid 1px black;
padding: 10px;
}
button {
margin-top: 10px;
padding: 20px;
}
p{
text-align: center;
font-size: 18px;
}JS
var b = document.getElementById('b'),
t = document.getElementById('table');
b.onclick = function () {
if (this.getAttribute('data-ec') === 'hide') {
t.style.emptyCells = 'show';
this.setAttribute('data-ec', 'show');
} else {
t.style.emptyCells = 'hide';
this.setAttribute('data-ec', 'hide');
}
};Простий приклад використання
HTML
<p>Для таблиці задана властивість <b>empty-cells: hide;</b></p>
<table>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td></td>
</tr>
<tr>
<td>Клітинка</td>
<td></td>
<td>Клітинка</td>
</tr>
</table>
<br>
<p>Для таблиці задана властивість <b>empty-cells: show;</b></p>
<table class="show">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td></td>
</tr>
<tr>
<td>Клітинка</td>
<td></td>
<td>Клітинка</td>
</tr>
</table>CSS
table {
border: 1px solid #666;
width: 100%;
empty-cells: hide;
}
.show{
empty-cells: show;
}
td, th {
border: 1px solid #666;
padding: 16px;
text-align: center;
}
p{
text-align: center;
font-size: 20px;
}Коментарі
Коментарів ще немає — будьте першим!