CSS властивості
ГлавнаяВластивості CSSАтрибут table-layout в CSS

Атрибут table-layout в CSS

340

Визначає, як браузер повинен обчислювати ширину осередків таблиці, ґрунтуючись на її вмісті.

Коротка інформація

Значення за замовчуванням auto
Успадковується Ні
Застосовується До тега <table> або до елемента, у якого значення display встановлено як table іл і inline-table.
Анімується Ні

Синтаксис

<code>table-layout: auto | fixed

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

auto
Браузер завантажує всю таблицю, аналізує її для визначення розмірів осередків і лише після цього відображає.
fixed
Ширина колонок у цьому випадку визначається або за допомогою елемента <col&g t; або обчислюється на основі першого рядка. Якщо дані про форматування першого рядка таблиці з будь-яких причин отримати неможливо, то таблиця ділиться на колонки рівної ширини. При використанні цього значення вміст, який не міститься в осередку зазначеної ширини, буде «обрізано» або накладено поверх осередку. Це залежить від використовуваного браузера, але в жодному разі ширина комірки не змінюватиметься. Для коректної роботи цього значення обов'язково має бути задана ширина таблиці.
-text-long field-label-above">

Приклад

<!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>&nbsp;</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&tt <td>3</td><td>34</td><td>62</td><td>74</td><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
</tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td <td>7</td><td>73</td><td>79</td><td>34</td><td
</tr>
</table>
</body>
</html>

Об'єктна модель

Об'єкт.style.tableLayout

Специфікація

Специфікація Статус
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation ( Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

5 12 1 7 1 1
1.5 1 9.8 3

Браузери

У таблиці браузерів застосовуються такі позначення.

  •   — властивість повністю підтримується браузером з усіма допустимими значеннями;
  • > — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">