Border-collapse xüsusiyyəti

border-collapse xüsusiyyəti td xanaları və ya th xanaları arasındakı ikiqat sərhədləri (həmçinin xana sərhədi ilə cədvəl özü arasındakı sərhədi) HTML cədvəlində birləşdirərək tək sərhəd kimi göstərir.

Bu xüsusiyyət yalnız cədvəllərə və display xüsusiyyəti table və ya inline-table olan elementlərə tətbiq edilir. Adi blok elementlərə, təəssüf ki, təsir etmir. Unutmayın ki, bu xüsusiyyət cədvələ tətbiq edilməlidir, xanalarına deyil.

Sintaksis

cssselektor {
  border-collapse: collapse | separate;
}

Dəyərlər

Susmaya görə dəyər: separate.

Nümunə . Separate dəyəri

Hal-hazırda cədvəldə bütün sərhədlər ikiqatdır (sərhəd həm xanalara, həm də cədvəlin özünə tətbiq edilib):

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

Результат:

Nümunə . Separate dəyəri

Indi isə sərhəd yalnız xanalara tətbiq edilib, cədvəlin özünə edilməyib. Iki xananın ortaq sərhədi olduğu yerlərdə sərhədlər ikiqat, qalan yerlərdə isə tək olacaq:

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

Результат:

Nümunə . Collapse dəyəri

Hal-hazırda cədvəldə bütün sərhədlər birləşəcək və arzu olunduğu kimi 1px qalınlığında görünəcək:

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

Результат: