border-collapse 속성

border-collapse 속성은 td 셀들 간 또는 th 셀들 간의 HTML 테이블의 이중 테두리 (그리고 셀 테두리와 테이블 자체의 테두리 사이)를 병합하여 하나처럼 보이게 합니다.

이 속성은 테이블과 display 속성값이 table 또는 inline-table인 요소에만 적용됩니다. 일반적인 블록 요소에는, 아쉽게도, 작동하지 않습니다. 주의할 점은 셀이 아닌 테이블 자체에 적용해야 한다는 것입니다.

구문

css선택자 {
  border-collapse: collapse | separate;
}

값

값	설명
`collapse`	이중 테두리가 하나로 보입니다. 부수적인 효과가 있습니다: `border-spacing` 속성과 `cellspacing` 속성이 작동하지 않게 됩니다.
`separate`	테이블의 각 셀이 자신의 테두리를 가집니다 (따라서 셀 사이의 간격이 0인 경우 일부 위치에서 테두리가 이중으로 보일 수 있습니다).

기본값: 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;
}

Результат: