Својство border-collapse
Својство border-collapse присиљава
двоструке ивице између ћелија td
или ћелија th
HTML табеле
(и између ивице ћелије и саме табеле)
да се споје и изгледају као једна.
Ово својство се примењује само за табеле
и за елементе са display
у вредности table или inline-table. За обичне
блок елементе оно, на жалост,
неће радити. Имајте у виду да га треба
применити на табелу, а не на њене ћелије.
Синтакса
селектор {
border-collapse: collapse | separate;
}
Вредности
| Вредност | Опис |
|---|---|
collapse |
Двоструке ивице ће изгледати као једна.
Постоје споредни ефекти: престаће да ради својство
border-spacing
и атрибут cellspacing.
|
separate |
Свака ћелија табеле ће имати своју ивицу (због чега ће на неким местима ивице бити двоструке, ако је размак између ћелија нула). |
Подразумевана вредност: separate.
Пример . Вредност separate
Тренутно у табели су све ивице двоструке (ивица је задата и ћелијама, и самој табели):
<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;
}
:
Пример . Вредност separate
А сада је ивица задата ћелијама, али самој табели није задата. Тамо где две ћелије имају заједничку ивицу, - ивице ће бити двоструке, на осталим местима - појединачне:
<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;
}
:
Пример . Вредност collapse
Сад ће се у табели све ивице спојити и
изгледаће дебљине 1px, као
што смо и желели:
<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;
}
: