CSS :: Свойство table-layout

css-свойство table-layout (от англ. table layout – макет таблицы) управляет процессом формирования браузером макета таблицы, точнее ширины ячеек.

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

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

Синтаксис

table-layout: auto | fixed

Значения

auto – браузер будет загружать всю таблицу, затем анализировать ее содержимое для определения размеров ячеек и только потом отображать ее на странице.
fixed – данное значение правильно срабатывает только, если задана ширина таблицы, позволяя быстрее сформировать ее макет. Действует оно следующим образом: если ширина колонки или ячейки не задана, то браузер будет вычислять ширину на основе первой строки таблицы, при чем вычисленная ширина будет уже фиксированной, и если содержимое ячейки не будет помещаться в указанную ширину, то в зависимости от браузера оно будет либо обрезано, либо будет отображаться поверх таблицы (налезать на соседние ячейки или выходить за пределы таблицы); если браузер по каким-то причинам не сможет получить информацию о размерах колонок первой строки таблицы, он просто разделит таблицу на колонки равной ширины.

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
	
		table{
		width: 100px;
		margin: 3em;
		border: 1px solid green;
		caption-side: top;
		border-collapse: collapse;
		table-layout: fixed;
		}
		
		td{
		border: 1px solid green;
		}

		/* Для первой таблицы */	
		table:first-child{
		table-layout: auto;
		}

		/* Для второй таблицы */	
		table:last-child{
		table-layout: fixed;
		}
		
	</style>
	
</head>
<body>

	<table>
		<caption>table-layout: auto</caption>
		<tr>
			<td>Ячейка 1.1aaaaaa</td><td>Ячейка 1.2bbbbb</td>
		</tr>
		<tr>
			<td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td>
		</tr>
	</table>

	<table>
		<caption>table-layout: fixed</caption>
		<tr>
			<td>Ячейка 1.1aaaaaa</td><td>Ячейка 1.2bbbbb</td>
		</tr>
		<tr>
			<td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td>
		</tr>
	</table>	
	
</body>
</html>

Пример №1