border-spacing

시도해 보기

border-spacing: 0;

border-spacing: 5px;

border-spacing: 5px 1rem;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tr>
      <td>Cell 1.1</td>
      <td>Cell 1.2</td>
    </tr>
    <tr>
      <td>Cell 2.1</td>
      <td>Cell 2.2</td>
    </tr>
    <tr>
      <td>Cell 3.1</td>
      <td>Cell 3.2</td>
    </tr>
  </table>
</section>

table {
  width: 15rem;
  table-layout: fixed;
}

td {
  border: 5px solid;
  border-color: crimson dodgerblue;
  padding: 0.75rem;
}

border-spacing 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) border-spacing 값과 표에 적용한 (상/우/하/좌) padding 값의 합이 됩니다.

구문

/* <length> */
border-spacing: 2px;

/* 가로 <length> | 세로 <length> */
border-spacing: 1cm 2em;

/* 전역 값 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

border-spacing 값은 하나 또는 두 개의 값을 사용해 지정합니다.

• 한 개의 <length> 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.
• 두 개의 <length> 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.

값

<length>

간격의 크기로 지정할 길이입니다.

형식 정의

형식 구문

border-spacing = 
  <length [0,∞]>{1,2}  

예제

칸 간격과 안쪽 여백

다음 예제는 칸 사이에 세로 간격 0.5emê³¼ 가로 간격 1em을 배치합니다. 표의 테두리를 따라가면서, padding 값이 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>

CSS

table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}

ê²°ê³¼

명세

브라우저 호환성

같이 보기

• border-collapse, border-style
• border-spacing 속성은 <table> HTML 요소의 외관을 수정합니다.