Savybė border-collapse

Savybė border-collapse priverčia dvigubus rėmelius tarp td ar th HTML lentelės langelių (ir tarp langelių rėmelio bei pačios lentelės) sulieti ir atrodyti kaip vienas.

Ši savybė taikoma tik lentelėms ir elementams, kurių display yra nustatytas į table ar inline-table. Paprastiems blokiniams elementams, deja, ji neveiks. Atminkite, kad taikyti reikia lentelei, o ne jos langeliams.

Sintaksė

cssselektorius {
  border-collapse: collapse | separate;
}

Reikšmės

Reikšmė	Aprašas
`collapse`	Dvigubi rėmeliai atrodys kaip vienas. Yra šalutiniai efektai: nustos veikti savybė `border-spacing` ir atributas `cellspacing`.
`separate`	Kiekvienas lentelės langelis turės savo rėmelį (dėl to kai kuriose vietose rėmeliai bus dvigubi, jei tarpas tarp langelių yra nulinis).

Numatytoji reikšmė: separate.

Pavyzdys . Reikšmė separate

Dabar lentelėje visi rėmeliai yra dvigubi (rėmelis nustatytas ir langeliams, ir pačiai lentelei):

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

Результат:

Pavyzdys . Reikšmė separate

Dabar rėmelis nustatytas langeliams, bet pačiai lentelei nenustatytas. Ten, kur du langeliai turi bendrą rėmelį, - rėmeliai bus dvigubi, kitur - viengubi:

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

Результат:

Pavyzdys . Reikšmė collapse

Dabar lentelėje visi rėmeliai susilies ir atrodys 1px storio, kaip ir norėtųsi:

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

Результат: