| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 + | 8.0 + | 1.0 + | 7.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
| Значення за умовчанням | auto |
|---|---|
| Успадковується | Ні |
| Застосовується | До тегу <table> або до елементу, у якого значення display встановлено як table або inline-table . |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Визначає, як браузер повинен обчислювати ширину осередків таблиці, грунтуючись на її вміст.
Синтаксис
table-layout: auto | fixed | inherit
Значення
- auto
- Браузер завантажує всю таблицю, аналізує її для визначення розмірів осередків і тільки після цього відображає.
- fixed
- Ширина колонок в цьому випадку визначається або за допомогою тега <col> , або обчислюється на основі першого рядка. Якщо дані про форматування першого рядка таблиці з яких-небудь причин отримати неможливо, в цьому випадку таблиця ділиться на колонки рівної ширини. При використанні цього значення, вміст, який не поміщається в комірку зазначеної ширини, буде « обрізано » або накладено поверх осередки. Це залежить від використовуваного браузера, але в будь-якому випадку ширина осередку мінятися не буде. Для коректної роботи цього значення обов'язково повинна бути задана ширина таблиці.
- inherit
- Успадковує значення батька.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
table-layout </title>
<style>
table {table-layout: fixed; /* Фіксована ширина осередків */ width: 100%; /* Ширина таблиці */ } .col1 {width: 160px; } .Coln {width: 60px; } </style>
</head>
<body>
<table border="1">
<col class="col1">
<col span="9" class="coln">
<tr>
<td>
</td>
<td>
2012 </td>
<td>
2013 </td>
<td>
2014 </td>
<td>
2015 </td>
<td>
2016 </td>
<td>
2017 </td>
<td>
2018 </td>
<td>
2019 </td>
<td>
2020 </td>
</tr>
<tr>
<td>
Нафта </td>
<td>
5 </td>
<td>
7 </td>
<td>
2 </td>
<td>
8 </td>
<td>
3 </td>
<td>
34 </td>
<td>
62 </td>
<td>
74 </td>
<td>
57 </td>
</tr>
<tr>
<td>
Золото </td>
<td>
3 </td>
<td>
6 </td>
<td>
4 </td>
<td>
6 </td>
<td>
4 </td>
<td>
69 </td>
<td>
72 </td>
<td>
56 </td>
<td>
47 </td>
</tr>
<tr>
<td>
Дерево </td>
<td>
5 </td>
<td>
8 </td>
<td>
3 </td>
<td>
4 </td>
<td>
7 </td>
<td>
73 </td>
<td>
79 </td>
<td>
34 </td>
<td>
86 </td>
</tr>
</table>
</body>
</html>
Браузери
Internet Explorer до версії 7.0 включно не підтримує значення inherit .