Зміна розмірів комірок таблиці браузером у CSS

Вивчаємо властивість table-layout, яка визначає спосіб розрахунку ширини комірок HTML-таблиці браузером.

Властивість table-layout

Властивість table-layout керує тим, як браузер визначає ширину стовпців таблиці.

Вона застосовується до елемента table.

Основні значення

auto — стандартний режим. Браузер сам змінює ширину комірок залежно від вмісту.
fixed — ширина комірок визначається за заданою шириною таблиці та першими рядками.

Режим auto


<table>
  <tr>
    <td>Короткий текст</td>
    <td>
      Дуже довгий текст, який може змінити ширину колонки
    </td>
  </tr>

  <tr>
    <td>Комірка 3</td>
    <td>Комірка 4</td>
  </tr>
</table>


table {
  width: 500px;
  table-layout: auto;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 10px;
}

Режим fixed


table {
  width: 500px;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 10px;
}

Порівняння auto і fixed

auto — зручний для таблиць із різним за довжиною вмістом.
fixed — швидший та передбачуваніший для великих таблиць.
fixed часто використовують у професійній верстці, коли важливий контроль розміру.

❗ Важливо:

table-layout: fixed допомагає зробити таблиці стабільними та покращує швидкість їх відображення браузером.

Практичне завдання

📌 Завдання:

№1. Створіть таблицю з двома стовпцями.
№2. Додайте довгий текст у одну з комірок.
№3. Перевірте різницю між table-layout: auto та table-layout: fixed.

💡 Показати підказку

Щоб побачити різницю, задайте таблиці конкретну ширину через width.

✅ Показати відповідь


table {
  width: 500px;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 10px;
}