Свойство empty-cells

Описание

Указывает, как должна оторажаться граница или фон в ячейке, если она пустая.

Ячейка считается пустой в следующих случаях:

- нет вообще никаких символов - в ячейке содержится только перевод строки, символ табуляции или пробел - значение visibility установлено как hidden

Добавление неразрывного пробела

& nbsp ;

воспринимается как видимое содержание, т. е. ячейка уже будет непустой.

Синтаксис

empty-cells: show | hide;
Значение Описание
show Отображает границу вокруг ячейки и фон в ней.
hide Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка будет прятаться целиком.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#table-test {
width: 100%;
}
#table-test td {
border: 3px solid #737373 !important;
padding: 5px;
empty-cells: hide;
}
</style>
<table id='table-test'>
<tr>
<td>Кирилл</td><td>Основатель gki-webik.ru</td><td>5</td>
</tr>
<tr>
<td>Иван</td><td> </td><td>4</td>
</tr>
<tr>
<td>Александр</td><td>Пользователь gki-webik.ru</td><td></td>
</tr>
<tr>
<td>Арсений</td><td> </td><td>3</td>
</tr>
</table>
</body>
</html>
КириллОснователь gki-webik.ru5
Иван 4
АлександрПользователь gki-webik.ru
Арсений 3

Читайте также

Свойство text-emphasis

Сокращённое свойство, позволяющее установить значения свойств text-emphasis-style и text-emphasis...

Свойство white-space

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любо...

Свойство animation-play-state

Указывает состояние анимации. Анимацию можно поставить на паузу и после этого воспроизвести с тог...

Свойство transition-delay

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение ...

Свойство border-bottom

Позволяет одновременно установить толщину, стиль и цвет нижней границы элемента.<br>Значени...