[크로스브라우징] IE에서 테이블 테두리가 사라지는 문제

border-collapse CSS 속성은 표 테두리(border)가 분리(separated) 또는 겹침 혹은 상쇄(collapsed)될 지를 결정한다.
분리 될 경우, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유한다.

border-spacing 속성 없이도 각 셀에 스타일링한 테두리가 제대로 출력될 수 있어서 매우 소중한 속성이지만,
이 속성은 역시 IE에서는 골칫덩어리였다.

아래 이미지와 같이 border-spacing: collapse 를 선언하는 순간 IE11 버전에서 테두리가 간헐적으로 사라지는 것을 발견했다.

border-collapse: collapse 를 설정한 테이블

이 경우 border-spacing 속성의 기본 값인 border-spacing: separate로 값을 바꿔주면 원하는 대로 테두리가 보이는것을 확인 했다.

기본값인 border-collapse: separate 를 설정한 테이블

이때 table 태그에 기본적으로 선언해줘야할 것은 border-spacing:0; 으로 테이블 셀 주위에 기본으로 설정된 padding값을 초기화해주는 스타일이다.

See the Pen table collapse by onlyeon (@onlyeon) on CodePen.

📖참고 자료

• MDN: border-collapse