css.in.ua
Підтримати

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-документах. Розуміння її можливостей та правильне застосування дозволяє покращити як продуктивність відображення, так і користувацький досвід на веб-сторінках.

Порада:

Використовуйте tableLayout: fixed, якщо вам потрібно швидко відобразити таблицю з фіксованою шириною стовпців.
Порада:

Застосовуйте tableLayout: auto, коли важливо, щоб ширина стовпців відповідала вмісту, особливо якщо комірки містять змінювані або динамічні дані.
Порада:

Використання tableLayout: fixed може значно покращити продуктивність, особливо для великих таблиць, оскільки браузеру не потрібно перераховувати ширину кожного стовпця на основі вмісту всіх комірок. Це також дозволяє уникнути "стрибків" в розмірах таблиці при завантаженні вмісту, забезпечуючи стабільне відображення з самого початку.

Синтаксис

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);

Спільнота

Зв'язок