CSS table-layout — алгоритм ширини таблиці
CSS властивість table-layout задає алгоритм формування макету таблиці, який буде використовуватися для її відображення. Іншими словами, ця властивість визначає, як браузер повинен обчислювати ширину комірок таблиці, опираючись на їх вміст.
Основна перевага табличного макета полягає в тому, що вона дозволяє виправляти макет таблиці так, щоб таблиця показувалася користувачеві набагато швидше. Не роблячи цього, у великих таблицях користувачі не бачитимуть жодної частини таблиці, поки браузер не опрацює всю таблицю. Це може скласти враження, що ваша сторінка завантажується дуже повільно. З іншого боку, якщо ви використовуєте властивість table-layout, користувачі побачать верхню частину таблиці під час завантаження браузера та надання решти таблиці. Це створює враження, що сторінка завантажується набагато швидше.
Загальний опис
автор: NagarD
Синтаксис
table-layout: auto|fixed|initial|inherit;Властивість table-layout може отримувати 4 значень:
-
auto -
Браузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.
Ширина стовпчика задається найширшим нерозривним змістом в клітинці.
Може повільно працювати, тому, що браузер повиннен прочитати весь контент в таблиці, перш ніж визначити остаточний розмір таблиці.
автор: Svitlana -
fixed -
Ширина колонок в цьому випадку визначається за допомогою тега
<col>, або обчислюється на основі її першого рядка. Якщо дані про форматування першого рядка таблиці з будь-яких причин отримати неможливо, тоді таблиця ділиться на колонки рівної ширини.При використанні цього значення, вміст, який не поміщається в комірку зазначеної ширини, буде «обрізано» або накладено поверх комірки. Це залежить від браузера, але в будь-якому випадку ширина комірок змінюватися не буде.
Для коректної роботи цього значення обов'язково повинна бути задана ширина таблиці. Алгоритму компоновки фіксованої таблиці:
- Горизонтальне розташування залежить тільки від ширини таблиці і ширини стовпців, а не вмісту комірок.
- Дозволяє браузеру відобразити таблицю швидше, ніж при автоматичному визначенні розмірів комірок таблиці.
- Браузер почне відображати таблицю після того, як перший ряд таблиці був отриманий.
-
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.tableLayout="fixed" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 14 | 1 | 1 | 7 | 12 | 5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1.5 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
Обидві таблиці однакові, але у верхній (auto) ширину колонок диктує вміст, а в нижній (fixed) колонки поділені порівну незалежно від нього — і таблиця рендериться швидше.
HTML
<table class="auto">
<tr><td>auto: колонка тягнеться за довгим вмістом</td><td>коротко</td></tr>
</table>
<table class="fixed">
<tr><td>fixed: колонки рівні незалежно від вмісту</td><td>коротко</td></tr>
</table>CSS
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
}
td {
border: 1px solid #0172ad;
padding: 6px;
}
.auto { table-layout: auto; }
.fixed { table-layout: fixed; }Одні й ті самі дані: auto розпирає стовпець довгим артикулом, fixed тримає рівні третини.
HTML
<p>table-layout: auto (типове)</p>
<table class="auto">
<tr><th>Товар</th><th>Артикул</th><th>Ціна</th></tr>
<tr><td>Кабель</td><td>KBL00000000000000000123</td><td>250</td></tr>
</table>
<p>table-layout: fixed</p>
<table class="fixed">
<tr><th>Товар</th><th>Артикул</th><th>Ціна</th></tr>
<tr><td>Кабель</td><td>KBL00000000000000000123</td><td>250</td></tr>
</table>CSS
table {
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
th,
td {
padding: 6px;
border: 1px solid #666;
}
.auto {
table-layout: auto;
}
.fixed {
table-layout: fixed;
word-break: break-all;
}Використання
HTML
<body>
<p>Для таблиці задана властивість <b>table-layout: fixed;</b></p>
<table>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
</table>
<br>
<p>Для таблиці задана властивість <b>table-layout: auto;</b></p>
<table class="auto">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
</table>CSS
body{
text-align: center;
}
table {
margin: auto;
border: 1px solid #666;
table-layout: fixed;
width: 200px;
}
td, th {
border: 1px solid #666;
padding: 10px;
}
.auto{
table-layout: auto;
}
p{
font-size: 18px;
}Значення властивості
HTML
<p>Вибери потрібне значення для <code>table-layout</code>:</p>
<div class="inputs">
<input id="auto" checked name="table-layout" type="radio"/>
<label for="auto">auto</label>
<message for="auto">Браузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.</message>
<input id="fixed" name="table-layout" type="radio"/>
<label for="fixed">fixed</label>
<message for="fixed">Ширина колонок в цьому випадку визначається за допомогою тега <col>, або обчислюється на основі її першого рядка. </message>
</div>
<p id="message">Браузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.</p>
<hr>
<table id="block">
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
<tr>
<td>Клітинка</td>
<td>Клітинка</td>
<td>Клітинка</td>
</tr>
</table>CSS
* {
box-sizing: border-box;
padding: 0;
}
body {
text-align: center;
font-family: monospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
#form {
padding: 8px 16px;
font-size: 19px;
}
#block {
border: 1px solid #666;
width: 200px;
}
td, th {
border: 1px solid #666;
}
#text {
height: 60px;
background-color: #eee;
padding: 16px 0;
}
message {
display: none;
}JS
const message = document.querySelector('#message');
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
var messageText = document.querySelector("message[for='" + this.id + "']");
message.textContent = messageText?.textContent ?? '';
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('table-layout', this.id));
}));Коментарі
Коментарів ще немає — будьте першим!