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

css-свойство empty-cells (от англ. empty cells – пустые ячейки) позволяет регулировать отображение границ и фона ячеек, у которых отсутствует содержимое (т.е. пустых ячеек). Браузеры считают ячейку пустой, если у нее отсутствуют любые символы, за исключением пробельных, либо значение свойства visibility установлено, как hidden.

Если используется свойство border-collapse со значением collapse, свойство empty-cells игнорируется.

Характеристики

Значение по умолчанию: show.
Применяется: к элементам <td>, <th>, а также ко всем элементам, у которых значение display установлено в table-cell.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.emptyCells="value".

Синтаксис

empty-cells: show | hide

Значения

hide – фон и границы пустых ячеек не отображаются.
show – фон и границы пустых ячеек отображаются.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/tables.html#propdef-empty-cells

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/empty-cells

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		table{
		width: 45%;
		margin-top: 3em;
		border: 1px solid green;
		}
		
		td{
		width: 15%;
		border: 1px solid green;
		background-color: yellow;
		}

		/* Для ячеек в нечетных строках	*/	
		tr:nth-child(odd) td{
		empty-cells: hide;
		}
		
	</style>
	
</head>
<body>
	
	<table>
				
		<tr>
			<td>Ячейка 1.1</td> <td></td> <td>Ячейка 1.3</td>
		</tr>
		
		<tr>
			<td>Ячейка 2.1</td> <td></td> <td>Ячейка 2.3</td>
		</tr>
		
		<tr>
			<td>Ячейка 3.1</td> <td></td> <td>Ячейка 3.3</td>
		</tr>		
		
		<tr>
			<td>Ячейка 4.1</td> <td></td> <td>Ячейка 4.3</td>
		</tr>		
		
	</table>	
		
</body>
</html>

Пример №1