Хосияти border-collapse

Хосияти border-collapse ҳудудҳои дукаратаро байни ҳуҷраҳои td ё ҳуҷраҳои th ҳамаи ҷадвалҳои HTML (ва байни ҳудуди ҳуҷра ва худи ҷадвал) маҷбур мекунад, ки захм шаванд ва ҳамчун якто намоён гарданд.

Ин хосият танҳо барои ҷадвалҳо ва барои унсурҳое, ки дорои display дар қимати table ё inline-table мебошанд, истифода мешавад. Барои унсурҳои блокӣ, мутаассифона, кор намекунад. Бояд дар хотир дошт, ки ин хосиятро бояд ба худи ҷадвал, на ба ҳуҷраҳои он, татбиқ кард.

Синтаксис

cssинтихобкунанда {
  border-collapse: collapse | separate;
}

Қиматҳо

Қимат	Тавсиф
`collapse`	Ҳудудҳои дукарата ҳамчун якто намоён хоҳанд шуд. Оқибатҳои ҷонибӣ низ вуҷуд доранд: хосияти `border-spacing` ва сифати `cellspacing` кор нахоҳанд кард.
`separate`	Ҳар як ҳуҷраи ҷадвал ҳудуди худро дорад (бинобар ин дар баъзе ҷойҳо, агар масофа байни ҳуҷраҳо сифр бошад, ҳудудҳо дукарата хоҳанд буд).

Қимати пешфарз: separate.

Намуна . Қимати separate

Акнун дар ҷадвал ҳамаи ҳудудҳо дукаратаанд (ҳудуд ҳам ба ҳуҷраҳо ва ҳам ба худи ҷадвал дода шудааст):

html<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>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Намуна . Қимати separate

Вале акнун ҳудуд танҳо ба ҳуҷраҳо дода шудааст, ба худи ҷадвал дода нашуд. Дар ҷойҳое, ки ду ҳуҷра ҳудуди муштарак доранд, ҳудудҳо дукарата хоҳанд буд, дар ҷойҳои дигар - яккарата:

html<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>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Намуна . Қимати collapse

Акнун дар ҷадвал ҳамаи ҳудудҳо захм мешаванд ва ба ҳамчун як сатри 1px намоён мешаванд, ки ҳамон тавре ки мехоҳем:

html<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>

csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: