Свойство table-layout устанавливает способ определения браузером ширины ячеек таблицы.
Это свойство применимо к тегу <table>.
Значение свойства table-layout
- auto - ширина ячеек таблицы определяется браузером автоматически на основании содержимого ячеек,
- fixed – ширина ячеек таблицы фиксирована. При этом:
- если ширина не указана, то она будет одинакова для всех ячеек, независимо от размеров их содержимого,
- если указана ширина отдельных ячеек, то ширина оставшихся также будет одинакова независимо от размеров их содержимого,
- inherit - принимает значение свойства родительского элемента.
- auto
<html>
<head>
<meta charset="utf-8">
<title> Свойство table-layout </title>
<style type="text/css">
table{width:700px; margin:5px;}
td{padding:3px;}
</style>
</head>
<body>
<table border>
<caption> Автоматическое вычисление ширины ячеек. </caption>
<tr>
<td> Первая ячейка ..... ..... ..... ..... ..... </td>
<td> 2-я ячейка. </td>
<td> 3-я. </td>
</tr>
</table>
<table border>
<caption> Ширина первой ячейки 250 px. Ширина остальных вычисляется автоматически. </caption>
<tr>
<td width="250"> Первая ячейка ..... ..... ..... ..... ..... </td>
<td> 2-я ячейка. </td>
<td> 3-я. </td>
</tr>
</table>
<table border style="table-layout:fixed;">
<caption> Ширина ячеек фиксирована - одинакова. </caption>
<tr>
<td> Первая ячейка ..... ..... ..... ..... ..... </td>
<td> 2-я ячейка. </td>
<td> 3-я. </td>
</tr>
</table>
<table border style="table-layout:fixed;">
<caption> Ширина первой ячейки 250 пикселей. Ширина остальных фиксирована - одинакова. </caption>
<tr>
<td width="250"> Первая ячейка ..... ..... ..... ..... ..... </td>
<td> 2-я ячейка. </td>
<td> 3-я. </td>
</tr>
</table>
</body>
</html>
При значении auto загрузка таблиц может быть медленной, так как браузеру необходимо вычислить и получить размеры всех ячеек исходя из их содержимого. А свойство table-layout со значением fixed повышает скорость загрузки страницы.
