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

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

element.style.borderSpacing - це властивість JavaScript, яка визначає відстань між межами сусідніх комірок у таблиці. Ця властивість застосовується до елементів <table> і дозволяє встановлювати простір між комірками як по горизонталі, так і по вертикалі.

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

Наприклад:

let table = document.getElementById('myTable');
table.style.borderSpacing = '10px';

У цьому прикладі ми знаходимо таблицю з ідентифікатором myTable і встановлюємо відстань між комірками на 10 пікселів. Важливо зазначити, що borderSpacing приймає значення у вигляді рядка, який може містити одиниці виміру, такі як пікселі (px), ем (em), відсотки (%) тощо.

Якщо вам потрібно встановити різні відстані по горизонталі і вертикалі, ви можете задати два значення, розділених пробілом:

table.style.borderSpacing = '10px 20px';

У цьому прикладі горизонтальна відстань між комірками буде 10 пікселів, а вертикальна - 20 пікселів. Це може бути корисним для створення більш складних і адаптивних макетів таблиць, де відстань між комірками різниться в залежності від напрямку.

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

Приклад з урахуванням цієї особливості:

table.style.borderCollapse = 'separate';
table.style.borderSpacing = '15px';

Цей код забезпечує, що відстань між комірками буде встановлена відповідно до значення borderSpacing, оскільки таблиця не використовує атрибут border-collapse: collapse.

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

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

Синтаксис

element.style.borderSpacing

Значення

Return

Переглядачі

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

Приклади

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

window.addEventListener('resize', function() {
    let table = document.getElementById('responsiveTable');
    let width = window.innerWidth;
    
    if (width < 600) {
        table.style.borderSpacing = '5px';
    } else if (width < 1200) {
        table.style.borderSpacing = '10px';
    } else {
        table.style.borderSpacing = '15px';
    }
});

let slider = document.getElementById('spacingSlider');
let table = document.getElementById('interactiveTable');

slider.addEventListener('input', function() {
    let spacingValue = slider.value + 'px';
    table.style.borderSpacing = spacingValue;
    document.getElementById('spacingValue').textContent = spacingValue;
});