border-collapse հատկությունը

border-collapse հատկությունը ստիպում է td բջիջների միջև եղած կրկնակի եզրերը կամ th բջիջների միջև եղած կրկնակի եզրերը HTML աղյուսակի (և բջիջի եզրի ու հենց աղյուսակի եզրի միջև) միաձուլվել և երևալ որպես մեկ եզր:

Այս հատկությունը կիրառվում է միայն աղյուսակների և այն տարրերի համար, որոնք ունեն display հատկություն՝ table կամ inline-table արժեքով: Սովորական բլոկային տարրերի համար այն, ցավոք, աշխատելու չէ: Հաշվի առեք, որ կիրառել պետք է աղյուսակի համար, և ոչ թե դրա բջիջների:

Շարահյուսություն

cssընտրող {
  border-collapse: collapse | 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;
}

Результат: