Właściwość CSSInterakcja i inne
border-spacing
Ustawia odstęp między komórkami tabeli z rozdzielonymi obramowaniami.
- Wartość domyślna
0- Dziedziczona
- Tak
- Animowalna
- tak, jako długość
- Dotyczy
- tabele z border-collapse: separate
- JavaScript
element.style.borderSpacing = "8px"
Przykład
#CSS
.calendar {
border-collapse: separate;
border-spacing: 4px;
}
.calendar td {
width: 32px;
height: 32px;
border-radius: 6px;
background: #1f1f23;
text-align: center;
}HTML przykładu
<table style="border-collapse: separate; border-spacing: 4px;">
<tr><td style="width: 32px; height: 32px; border-radius: 6px; background: #312e81; text-align: center;">✓</td><td style="width: 32px; height: 32px; border-radius: 6px; background: #312e81; text-align: center;">✓</td><td style="width: 32px; height: 32px; border-radius: 6px; background: #312e81; text-align: center;">✓</td><td style="width: 32px; height: 32px; border-radius: 6px; background: #312e81; text-align: center;">✓</td><td style="width: 32px; height: 32px; border-radius: 6px; background: #312e81; text-align: center;">✓</td><td style="width: 32px; height: 32px; border-radius: 6px; background: #1f1f23;"></td><td style="width: 32px; height: 32px; border-radius: 6px; background: #1f1f23;"></td></tr>
</table>Podgląd
Definicja i zastosowanie
#Właściwość border-spacing określa odległość między obramowaniami sąsiednich komórek tabeli. Działa tylko przy border-collapse: separate.
Jedna wartość ustawia ten sam odstęp w poziomie i w pionie, dwie wartości osobno: najpierw poziomy, potem pionowy.
Dzięki niej tabela może wyglądać jak siatka kafelków, na przykład kalendarz albo tabela postępów, z przerwami między komórkami.
Składnia
#Składnia
border-spacing: <długość> <długość>?;Wartości
#Wartości w praktyce
#0
Obramowania komórek stykają się ze sobą.
.demo { border-spacing: 0; }6px
Równy odstęp 6px między komórkami.
.demo { border-spacing: 6px; }16px 4px
Szerokie odstępy w poziomie, wąskie w pionie.
.demo { border-spacing: 16px 4px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli odstęp nie działa, sprawdź, czy tabela nie ma
border-collapse: collapse. - Odstępy między komórkami tworzą ładne siatki, ale w tabelach danych utrudniają czytanie wierszy.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.