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: auto, коли важливо, щоб ширина стовпців відповідала вмісту, особливо якщо комірки містять змінювані або динамічні дані.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.tableLayout

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<table id="dataTable">
    <tr><td>комірка 1</td><td>комірка 2</td></tr>
</table>

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

<table id="myTable">
    <tr><td>комірка 1</td><td>комірка 2</td></tr>
</table>
<div id="switchLayout">Демонстраційний елемент</div>

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