테이블 — border-collapse:collapse 완전 정리

 

 

Web Development · HTML Table

테이블 — border-collapse:collapse로
이중선 합치기

표 외곽선과 셀 외곽선이 합쳐져 한 줄짜리 깔끔한 격자 만들기

시작 오늘 분석할 코드

이전 예제(table-css1)에 한 줄 추가했을 뿐이다. border-collapse: collapse 한 줄로 이중선이 사라지고 깔끔한 격자가 된다.

.table1 { border: 1px solid black; border-collapse: collapse; /* ★ 핵심 한 줄 */ } .table1 td { border: 1px dashed black; padding: 10px; text-align: center; }

실제 출력 비교

기본 (border-collapse 없음 = separate):

프로축구 경기 일정 (separate)

울산	울산 vs 인천
부산	부산 vs 대전

border-collapse: collapse 적용:

프로축구 경기 일정 (collapse)

울산	울산 vs 인천
부산	부산 vs 대전

용어 용어 정리

border-collapse셀 테두리 합칠지 분리할지 결정하는 속성

collapse표 외곽 + 셀 외곽 → 한 줄로 합침

separate기본값 — 셀들이 떨어져 있고 사이 빈 공간

셀 우선합칠 때 두께·종류·색이 다르면 셀 border가 우선

border-spacingseparate일 때만 동작 — 셀 사이 간격

---

1 collapse는 무엇을 합치나?

border-collapse: collapse는 인접한 두 테두리를 한 줄로 겹친다. 두 셀이 맞닿은 부분, 셀과 표 외곽이 맞닿은 부분 모두 한 줄짜리 테두리로 통합.

separate (기본): ┌───────────────────┐ │ ┌───┐ ┌───┐ ┌───┐ │ │ │셀1│ │셀2│ │셀3│ │ ← 표 외곽선 + 셀 외곽선이 따로 │ └───┘ └───┘ └───┘ │ └───────────────────┘ collapse: ┌───┬───┬───┐ │셀1│셀2│셀3│ ← 한 줄로 통합 └───┴───┴───┘

---

2 합치기 규칙 — 누가 우선?

두 셀의 border가 다르면 "가장 굵은 → 가장 의미 있는" 순으로 우선순위를 따른다.

우선순위	규칙
1	style이 hidden이면 무조건 그 쪽 (테두리 없음)
2	두께가 더 굵은 쪽이 이김
3	두께가 같으면 style 우선순위: double > solid > dashed > dotted
4	모두 같으면 위·왼쪽 셀이 이김

반응형

---

3 자주 하는 실수

실수	증상	해결
collapse 누락	이중선·간격 발생	border-collapse: collapse 추가
collapse + border-spacing	spacing이 무시됨	둘 중 하나만 — 간격 원하면 separate
collapse + border-radius	모서리가 둥글게 안 되거나 깨짐	border-radius 원하면 separate, 또는 wrapper로
th와 td 두께 다르게	합치면서 의도치 않은 굵기	두께 통일

---

핵심 한 줄 요약

border-collapse셀 테두리 합치기 / 분리

collapse한 줄 격자 — 깔끔, 가장 많이 씀

separate (기본)셀 분리 + 빈 공간 — 디자인 표에 사용

우선순위hidden > 굵은 두께 > style > 위치

실무대부분 collapse 사용 — 데이터 표의 표준

Tags

#border-collapse #collapse #separate #테이블 #table #td #tr #th #이중선제거 #격자 #CSS테이블 #데이터표 #border-spacing #박스모델 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

border-collapse, collapse, separate, 테이블, table, td, tr, th, 이중선제거, 격자, CSS테이블, 데이터표, border-spacing, 박스모델, 웹개발, HTML, 티스토리