Својство 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;
}

Результат: