JS властивість CSSStyleDeclaration.borderCollapse

Загальний опис

element.style.borderCollapse – це властивість JavaScript, яка дозволяє встановлювати або змінювати спосіб відображення меж таблиці. Основна суть цієї властивості полягає в тому, щоб надати розробникам можливість керувати тим, як межі комірок таблиці будуть відображатися: окремо для кожної комірки або як одна суцільна межа для всіх комірок. Це може бути корисним для створення більш акуратних і зручних для читання таблиць. Основні сфери застосування включають оформлення таблиць у веб-дизайні, де важливо контролювати вигляд меж для покращення візуального сприйняття даних.

Щоб використовувати element.style.borderCollapse, спочатку потрібно отримати доступ до таблиці або її елементів, до яких ви хочете застосувати цю властивість. Це можна зробити за допомогою методів, таких як getElementById, getElementsByClassName або querySelector. Після цього можна встановити бажаний стиль відображення меж.

Розглянемо простий приклад. Припустимо, у вас є таблиця з ідентифікатором myTable, і ви хочете встановити для неї стиль меж collapse, що об'єднує межі сусідніх комірок:

// Знаходимо таблицю за її ідентифікатором
let table = document.getElementById('myTable');

// Встановлюємо стиль відображення меж
table.style.borderCollapse = 'collapse';

У цьому прикладі ми використовуємо простий синтаксис для встановлення стилю відображення меж таблиці. Це дозволяє швидко змінити зовнішній вигляд таблиці, роблячи її межі більш акуратними.

Тепер розглянемо складніший приклад, де ми будемо змінювати стиль відображення меж таблиці при натисканні на кнопку. Це може бути корисним для створення інтерактивних таблиць, які змінюють свій вигляд у залежності від дій користувача:

<table id="myTable">
<tr>
  <th>Назва</th>
  <th>Значення</th>
</tr>
<tr>
  <td>Елемент 1</td>
  <td>Значення 1</td>
</tr>
<tr>
  <td>Елемент 2</td>
  <td>Значення 2</td>
</tr>
</table>
<button id="changeStyleButton">Змінити стиль меж</button>

<script>
// Знаходимо таблицю та кнопку за їх ідентифікаторами
let table = document.getElementById('myTable');
let button = document.getElementById('changeStyleButton');

// Додаємо обробник події для кнопки
button.addEventListener('click', function() {
  // Перевіряємо поточний стиль меж і змінюємо його
  if (table.style.borderCollapse === 'collapse') {
    table.style.borderCollapse = 'separate';
  } else {
    table.style.borderCollapse = 'collapse';
  }
});
</script>

У цьому прикладі ми створюємо кнопку, яка змінює стиль відображення меж таблиці при натисканні. Початковий стиль меж встановлений на collapse, що об'єднує межі сусідніх комірок. При натисканні на кнопку стиль змінюється на separate, що відображає межі кожної комірки окремо. Це демонструє, як можна динамічно змінювати властивість borderCollapse за допомогою JavaScript, створюючи інтерактивні ефекти для користувачів.

Використання element.style.borderCollapse є простим, але ефективним способом покращити дизайн і функціональність ваших таблиць. Ця властивість надає можливість тонко налаштовувати вигляд меж таблиці, роблячи її більш інформативною та привабливою для користувачів.

Синтаксис

element.style.borderCollapse

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<table id="myTable">
<tr>
  <th>Назва</th>
  <th>Значення</th>
</tr>
<tr>
  <td>Елемент 1</td>
  <td>Значення 1</td>
</tr>
<tr>
  <td>Елемент 2</td>
  <td>Значення 2</td>
</tr>
</table>

<script>
// Знаходимо таблицю за її ідентифікатором
let table = document.getElementById('myTable');

// Встановлюємо стиль відображення меж
table.style.borderCollapse = 'collapse';
</script>

<table id="myTable">
<tr>
  <th>Назва</th>
  <th>Значення</th>
</tr>
<tr>
  <td>Елемент 1</td>
  <td>Значення 1</td>
</tr>
<tr>
  <td>Елемент 2</td>
  <td>Значення 2</td>
</tr>
</table>
<button id="changeStyleButton">Змінити стиль меж</button>

<script>
// Знаходимо таблицю та кнопку за їх ідентифікаторами
let table = document.getElementById('myTable');
let button = document.getElementById('changeStyleButton');

// Додаємо обробник події для кнопки
button.addEventListener('click', function() {
  // Перевіряємо поточний стиль меж і змінюємо його
  if (table.style.borderCollapse === 'collapse') {
    table.style.borderCollapse = 'separate';
  } else {
    table.style.borderCollapse = 'collapse';
  }
});
</script>