Właściwość CSSInterakcja i inne
border-collapse
Łączy sąsiednie obramowania komórek tabeli w jedną linię albo zostawia je osobno.
- Wartość domyślna
separate- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- tabele (display: table)
- JavaScript
element.style.borderCollapse = "collapse"
Przykład
#CSS
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border-bottom: 1px solid #333;
padding: 8px 12px;
text-align: left;
}HTML przykładu
<table style="border-collapse: collapse; width: 100%;">
<tr><th style="border-bottom: 1px solid #555; padding: 8px 12px; text-align: left;">Uczeń</th><th style="border-bottom: 1px solid #555; padding: 8px 12px; text-align: left;">EXP</th></tr>
<tr><td style="border-bottom: 1px solid #333; padding: 8px 12px;">Ania</td><td style="border-bottom: 1px solid #333; padding: 8px 12px;">1240</td></tr>
<tr><td style="border-bottom: 1px solid #333; padding: 8px 12px;">Kuba</td><td style="border-bottom: 1px solid #333; padding: 8px 12px;">980</td></tr>
</table>Podgląd
Definicja i zastosowanie
#Domyślnie (separate) każda komórka tabeli ma własne obramowanie, więc między komórkami widać podwójne linie z odstępem. Wartość collapse łączy sąsiednie obramowania w jedną linię.
W praktyce border-collapse: collapse to pierwsza linijka, jaką dopisuje się do stylów tabeli z danymi. Tabela wygląda wtedy czysto i porządnie.
Przy separate odstęp między komórkami ustawisz właściwością border-spacing, a przy collapse ta właściwość nie działa.
Składnia
#Składnia
border-collapse: separate | collapse;Wartości
#Wartości w praktyce
#separate
Podwójne linie z odstępami między komórkami.
.demo { border-collapse: separate; }collapse
Pojedyncze, wspólne linie.
.demo { border-collapse: collapse; }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
#- Tabele danych zaczynaj od
border-collapse: collapsei linii tylko pod wierszami. Wyglądają lżej niż pełna siatka. - Przy
collapsezaokrągleniaborder-radiusna tabeli nie działają. Owiń tabelę w element zoverflow: hidden.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.