CSS свойство empty-cells

CSS свойства

Определение и применение

CSS свойство empty-cells устанавливает, следует ли отображать границы и фон пустых ячеек в таблице.

Обращаю Ваше внимание, что если свойство border-collapse:collapse (границы объединяются в одну, когда это возможно), то свойство empty-cells будет игнорировано.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
empty-cells1.01.04.01.28.012.0

CSS синтаксис:

empty-cells:"show | hide | initial | inherit";

JavaScript синтаксис:

object.style.emptyCells = "show"

Значения свойства

ЗначениеОписание
showЗадний фон и границы отображаются в пустых ячейках. Это значение по умолчанию.
hideЗадний фон и границы не отображаются в пустых ячейках.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства CSS empty-cells.</title>
<style> 
td, th {
border : 1px solid; /* устанавливаем сплошную границу 1px (по умолчанию - черная)  */
background-color : khaki; /* задаем цвет заднего фона для элементов <td> и <th>   */
}
.test {
border-collapse : separate; /* отдельно стоящие границы (по умолчанию) */
empty-cells : hide; /* задний фон и границы не отображаются в пустых ячейках */
}
.test2 {
border-collapse : separate; /* отдельно стоящие границы (по умолчанию) */
empty-cells : show; /* задний фон и границы отображаются в пустых ячейках (по умолчанию) */
}
</style>
</head>
	<body>
		<table class = "test">
			<caption>empty-cells: hide;</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Веревка</td><td></td>
			</tr>
			<tr>
				<td>Мыло жидкое</td><td>45 рублей</td>
			</tr>
		</table>
		<table class = "test2">
			<caption>empty-cells: show;</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Веревка</td><td></td>
			</tr>
			<tr>
				<td>Мыло жидкое</td><td>45 рублей</td>
			</tr>
		</table>
	</body>
</html>
Пример использования свойства CSS empty-cells.
Пример использования свойства CSS empty-cells (отображение пустых ячеек).
CSS свойства