Хосияти 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;
}
: