border-spacing 속성

border-spacing 속성은 HTML 테이블의 td 셀 또는 th 셀 사이의 간격(그리고 셀 경계와 테이블 자체 사이의 간격)을 설정합니다. 속성 값으로는 백분율을 제외한 모든 크기 단위를 사용할 수 있습니다.

구문

css선택자 {
  border-spacing: 하나 또는 두 개의 값;
}

값

기본값: 0. 그러나, 각 브라우저는 cellspacing 속성의 기본값이 0이 아니므로, 기본적으로 셀 사이에 간격이 보입니다.

참고 사항

이 속성은 테이블의 셀이 아닌 테이블 자체에 적용하세요 (셀에 적용하면 작동하지 않습니다).

margin을 사용해서는 동일한 효과를 얻을 수 없습니다. 왜냐하면 테이블 셀의 margin은 작동하지 않기 때문입니다.

border-collapse 속성이 collapse 값으로 설정되어 있으면 - border-spacing은 작동하지 않습니다.

예제 . 하나의 값

셀 사이(및 셀과 테이블 경계 사이)의 간격을 10px로 만들어 봅시다:

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-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

예제 . 두 개의 값

이제 수평 간격을 10px, 수직 간격을 30px로 만들어 봅시다:

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-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

예제 . border-collapse: collapse 설정

이번에는 border-collapse 속성이 collapse 값으로 설정되어 있어서 border-spacing이 작동하지 않습니다:

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;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: