CSS 테이블 border가 셀 높이에 영향을 주는 이유

테이블 셀의 높이를 40px로 맞춰놨는데, 40.5px로 다르게 계산됐다. 다 그런 건 아니고 원래 셀들은 정상이었는데, 첫 번째 행과 마지막 행의 셀에서만 발생했다.

개발자 도구에서 검사해보면 총 계산 높이가 40.5로 표시된다. 패딩은 위아래 10px 라서 20px이고 내부 폰트 높이가 20px이므로 이론상 40px이어야 했다.

border-collapse: collapse

이건 테이블 스타일에 기본 적용된 border-collapse: collapse 때문이었다. collapse 모드에서는 테이블과 셀, 그리고 인접 셀 간의 테두리를 따로 유지하지 않고 하나의 Grid line 으로 맞춰진다.

이때 테두리는 격자선 중앙을 기준으로 절반씩 양쪽으로 배치된다. 테이블 자체 테두리는 전체 두께의 절반은 테이블 바깥으로 간주하고, 나머지 절반은 가장 바깥의 외곽 셀 레이아웃 계산 영역 내부로 들어온다.

테이블의 border-collapse를 collapse로 두고 테스트를 위해 border 두께를 10px로 늘려보면 실제 셀 컨텐츠 크기는 안변하는데 계산 높이가 40px + 5px 로 늘어난다. 테이블 테두리의 절반 5px이 붙어버린 것.

border-collapse: separate로 별개로 분리

테이블과 셀의 테두리 박스를 완전히 분리하면 셀의 크기만 관리할 수 있다. border-collapse를 separate로 변경하고, 셀 간 간격을 0으로 설정.

.table {
  border-collapse: separate;
  border-spacing: 0;
}

이렇게 하면 셀과 테이블이 더 이상 테두리를 공유하지 않는다.