CSS :: Свойство border-collapse

css-свойство border-collapse (от англ. border collapse – схлопывание границ) устанавливает, как отображать границы ячеек таблицы: слитно или раздельно.

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

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

Синтаксис

border-collapse: collapse | separate

Значения

collapse – границы смежных ячеек в местах соприкосновения сливаются в одну. Тоже самое касается границ ячеек и внешних границ таблицы, если они установлены.
separate – каждая ячейка имеет свою отдельную границу (рамку). В местах соприкосновения смежных ячеек, а также ячеек и внешних границ таблицы, если они установлены, пользователь будет видеть две линии (значение используется браузером по умолчанию).

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/CSS2/tables.html#borders

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

Примеры

HTML Результат

htmlCodes

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

	<style>
		table{
		width: 50%;
		margin-top: 3em;
		border: 1px solid green;
		}
		
		td{
		border: 1px solid green;
		}

		.separate_borders{
		border-collapse: separate;
		}
		
		.collapse_borders{
		border-collapse: collapse;
		}
		
	</style>
	
</head>
<body>
	
	<table class="separate_borders">
		<caption>Таблица с раздельными границами</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>	
	
	
	<table class="collapse_borders">
		<caption>Таблица с объединенными границами</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>
		
</body>
</html>

Пример №1