Sifa border-collapse

Sifa border-collapse inalazimisha miipaka michoro kati ya seli td au seli th za jedwali la HTML (na kati ya mpaka wa seli na jedwali lenyewe) ikandamizwe na kuonekana kama moja.

Sifa hii inatumika kwa majedwali tu na kwa vipengele vilivyo na display kwa thamani table au inline-table. Kwa vipengele vya kawaida vya kuzuia (block), kwa bahati mbaya, haitafanya kazi. Kumbuka, inapaswa kutumiwa kwa jedwali, na si kwa seli zake.

Kiendeshaji

csskichaguaji {
  border-collapse: collapse | separate;
}

Thamani

Thamani	Maelezo
`collapse`	Miipaka michoro itaonekana kama moja. Kuna madhara: sifa `border-spacing` na sifa `cellspacing` hitatenda kazi.
`separate`	Kila seli ya jedwali itakuwa na mpaka wake (kwa hivyo katika maeneo fulani miipaka itakuwa michoro, kama nafasi kati ya seli ni sifuri).

Thamani chaguomsingi: separate.

Mfano . Thamani separate

Sasa kwenye jedwali miipaka yote ni michoro (mpaka umepewa seli na jedwali lenyewe):

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

Результат:

Mfano . Thamani separate

Sasa mpaka umepewa seli, lakini jedwali lenyewe halijapewa mpaka. Pale ambapo seli mbili zina mpaka wa pamoja, - miipaka itakuwa michoro, kwenye maeneo mengine - ya pekee:

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

Результат:

Mfano . Thamani collapse

Sasa kwenye jedwali miipaka yote itakandamizwa na kuonekana kwa unene wa 1px, kama ilivyotakikana:

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

Результат: