JS властивість CSSStyleDeclaration.tableLayout
Загальний опис
element.style.tableLayout — це властивість JavaScript, яка дозволяє керувати макетом таблиці в DOM-елементі, визначаючи як будуть відображатися рядки і стовпці.
Властивість tableLayout може приймати два основних значення: "auto" та "fixed". При значенні "auto", ширина таблиці та її стовпців визначається автоматично на основі вмісту. Це означає, що браузер буде аналізувати вміст кожної комірки і відповідно підлаштовувати ширину стовпців, що може викликати зміну розмірів під час завантаження сторінки. При значенні "fixed", ширина таблиці визначається на основі першого рядка таблиці, і всі інші рядки будуть підлаштовуватися під цю ширину. Це значення забезпечує більш передбачуване відображення та може прискорити рендеринг великих таблиць.
Приклади використання
Приклад 1: Встановлення макету таблиці на auto
let table = document.getElementById("myTable");
table.style.tableLayout = "auto";
В цьому прикладі ми отримуємо елемент таблиці з ідентифікатором myTable і встановлюємо властивість tableLayout на "auto", що змусить браузер автоматично підлаштовувати ширину стовпців під вміст комірок.
Приклад 2: Встановлення макету таблиці на fixed
let table = document.getElementById("myTable");
table.style.tableLayout = "fixed";
Тут ми змінюємо макет таблиці на fixed, що означає, що ширина стовпців буде визначатися тільки на основі першого рядка, роблячи таблицю більш стабільною за розмірами під час відображення.
Загалом властивість element.style.tableLayout є важливим інструментом для контролю макета таблиць в HTML-документах. Розуміння її можливостей та правильне застосування дозволяє покращити як продуктивність відображення, так і користувацький досвід на веб-сторінках.
| Порада: | Використовуйте |
| Порада: | Застосовуйте |
| Порада: | Використання |
Синтаксис
element.style.tableLayoutЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі, користувач може натискати кнопку для переключення макету таблиці між режимами "auto" та "fixed". Це дозволяє побачити, як змінюється поведінка таблиці при різних макетах, і зрозуміти різницю між автоматичним підлаштуванням ширини стовпців та фіксованим макетом.
У цьому прикладі ми реалізували функціонал, який дозволяє користувачеві динамічно перемикати макет таблиці між режимами "auto" та "fixed" натисканням кнопки. Це корисно в ситуаціях, коли потрібно змінювати відображення таблиці на основі змін у вмісті або користувацьких налаштувань, забезпечуючи гнучкість у використанні інтерфейсу.
let table = document.getElementById("myTable");
let switchButton = document.getElementById("switchLayout");
switchButton.addEventListener("click", () => {
if (table.style.tableLayout === "auto") {
table.style.tableLayout = "fixed";
} else {
table.style.tableLayout = "auto";
}
});
У цьому прикладі ми використовуємо властивість tableLayout: fixed для прискорення початкового завантаження великої кількості даних в таблицю. Спочатку встановлюємо tableLayout: fixed, щоб уникнути багаторазового перерахунку ширини стовпців під час додавання рядків, а після завантаження даних повертаємо значення tableLayout: auto для забезпечення динамічної підгонки ширини стовпців під вміст. Це покращує продуктивність і робить процес завантаження даних ефективнішим.
let table = document.getElementById("dataTable");
function loadData(data) {
table.style.tableLayout = "fixed";
data.forEach(rowData => {
let row = table.insertRow();
rowData.forEach(cellData => {
let cell = row.insertCell();
cell.textContent = cellData;
});
});
table.style.tableLayout = "auto";
}
// Приклад даних для завантаження
let sampleData = [
["Name", "Age", "City"],
["Alice", "30", "New York"],
["Bob", "25", "Los Angeles"],
// Більше даних...
];
loadData(sampleData);