Border-collapse xususiyati

border-collapse xususiyati td kataklari yoki th kataklari o'rtasidagi qo'sh chegaralarni (va katak chegarasi bilan jadvalning o'zi o'rtasidagi chegarani) HTML jadvalida bir chegaraga qishtiradi.

Ushbu xususiyat faqat jadvallar va display xususiyati table yoki inline-table qiymatiga ega bo'lgan elementlar uchun qo'llaniladi. Oddiy blokli elementlar uchun, afsuski, ishlamaydi. E'tiboringizni jadvalning o'ziga qo'llashingiz kerak, uning kataklariga emas.

Sintaksis

cssselector {
  border-collapse: collapse | separate;
}

Qiymatlar

Qiymat	Tavsif
`collapse`	Qo'sh chegaralar bitta ko'rinishga keladi. Yon ta'sirlar mavjud: `border-spacing` xususiyati va `cellspacing` atributi ishlamay qoladi.
`separate`	Jadvalning har bir katagi o'z chegarasiga ega bo'ladi (shuning uchun, agar kataklar orasidagi masofa nol bo'lsa, ba'zi joylarda chegaralar qo'sh ko'rinishda bo'ladi).

Standart qiymat: separate.

Misol . Separate qiymati

Hozirda jadvaldagi barcha chegaralar qo'sh (chegaralar ham kataklarga, ham jadvalning o'ziga berilgan):

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;
}

Результат:

Misol . Separate qiymati

Hozir esa chegaralar faqat kataklarga berilgan, jadvalning o'ziga berilmagan. Ikkita katakning umumiy chegarasi bo'lgan joylarda chegaralar qo'sh bo'ladi, qolgan joylarda - bitta:

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;
}

Результат:

Misol . Collapse qiymati

Hozirda jadvaldagi barcha chegaralar qisilib, 1px qalinlikdagi bitta chiziq ko'rinishida bo'ladi, xohlagandek:

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;
}

Результат: