Īpašība border-collapse
Īpašība border-collapse liek
dubultajām robežām starp td
vai th
HTML tabulas šūnām
(un starp šūnas robežu un pašas tabulas robežu)
savilkties kopā un izskatīties kā vienai.
Šī īpašība tiek lietota tikai tabulām
un elementiem ar display
ar vērtību table vai inline-table. Parastiem
bloka elementiem tā, diemžēl,
nestrādās. Ņemiet vērā, ka jālieto
tabulai, nevis tās šūnām.
Sintakse
selektors {
border-collapse: collapse | separate;
}
Vērtības
| Vērtība | Apraksts |
|---|---|
collapse |
Dubultās robežas izskatīsies kā viena.
Ir blakusefekti: pārstās darboties īpašība
border-spacing
un atribūts cellspacing.
|
separate |
Katra tabulas šūna būs ar savu robežu (tāpēc dažās vietās robežas būs dubultas, ja atstarpe starp šūnām ir nulle). |
Noklusējuma vērtība: separate.
Piemērs . Vērtība separate
Šobrīd tabulā visas robežas ir dubultas (robeža ir iestatīta gan šūnām, gan pašai tabulai):
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
table {
border-collapse: separate;
width: 400px;
border-spacing: 0;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
:
Piemērs . Vērtība separate
Bet šoreiz robeža ir iestatīta šūnām, bet pašai tabulai nav iestatīta. Tur, kur divām šūnām ir kopīga robeža, - robežas būs dubultas, atlikušajās vietās - vienkāršas:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
table {
border-collapse: separate;
width: 400px;
border-spacing: 0;
}
td {
border: 1px solid red;
text-align: center;
}
:
Piemērs . Vērtība collapse
Šobrīd tabulā visas robežas savilksies un
izskatīsies ar biezumu 1px, kā
gribētos:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
table {
border-collapse: collapse;
width: 400px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
: