Урок 18 із 104
17%
← Назад

Схлопування меж таблиці в CSS

Вивчаємо властивість border-collapse, яка визначає, чи будуть межі комірок таблиці об'єднуватись в одну.

Властивість border-collapse

За замовчуванням кожна комірка таблиці має власні межі. Через це між сусідніми комірками можуть відображатися подвійні лінії.

Властивість border-collapse дозволяє об'єднати сусідні межі в одну суцільну лінію.

Значення властивості

  • separate — стандартний режим, межі комірок не об'єднуються.
  • collapse — межі сусідніх комірок об'єднуються в одну.

Приклад без схлопування меж


<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

table {
  border: 2px solid black;
}

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

Приклад зі схлопуванням меж


table {
  border-collapse: collapse;
  border: 2px solid black;
}

td {
  border: 2px solid black;
  padding: 10px;
}
❗ Важливо:

У більшості сучасних таблиць використовують border-collapse: collapse, оскільки таблиця виглядає акуратніше та не має подвійних меж.

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

📌 Завдання:
  1. №1. Створіть таблицю 3×3.
  2. №2. Додайте рамки таблиці та всім коміркам.
  3. №3. Зробіть так, щоб межі комірок схлопувалися в одну лінію.
💡 Показати підказку

Властивість border-collapse задається для елемента table.

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

table {
  border-collapse: collapse;
  border: 2px solid black;
}

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