CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성

개요

border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다.

  • 기본값 : separate
  • 상속 : Yes
  • 애니메이션 : No
  • 버전 : CSS Level 2

문법

border-collapse: separate | collapse | initial | inherit
  • separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다.
  • collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다.
  • initial : 기본값으로 설정한다.
  • inherit : 부모 요소의 속성값을 상속받는다.

속성값이 separate일 때, 간격의 크기는 border-spacing 속성으로 정한다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
        border: 1px solid #333333;
      }
      td {
        padding: 10px;
        border: 1px solid #333333;
      }
      .a {
        border-collapse: separate;
      }
      .b {
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <h1>Border Collapse - Separate</h1>
    <table class="a">
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
    </table>
    <h1>Border Collapse - Collapse</h1>
    <table class="b">
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
      <tr>
        <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
      </tr>
    </table>
  </body>
</html>

같은 카테고리의 다른 글
CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 이미지 버튼 만들기

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / aspect-ratio / 요소의 가로 세로 비율 정하는 속성

CSS / aspect-ratio / 요소의 가로 세로 비율 정하는 속성

개요 aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성이다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있다. 문법 aspect-ratio: auto | number / number | initial | inherit auto : 요소가 고유의 가로 세로 비율을 가진 경우 그 값으로 설정한다. number / number : 가로 대 세로. 세로가 생략된 ...

CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...

CSS / Flex / 정가운데 배치하기

CSS / Flex / 정가운데 배치하기

justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 링크 꾸미기

CSS / 링크 꾸미기

선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / border / 테두리 만드는 속성

CSS / border / 테두리 만드는 속성

개요 border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...

CSS / 메모

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; ​} 가변폭 ...

CSS / linear-gradient - 선형 그라데이션 효과 만들기

CSS / linear-gradient - 선형 그라데이션 효과 만들기

linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, color3 ) direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 ...