[CSS] div 에 border-collapse 적용

[배경]

회원가입 입력 폼을 작성할 때는 에러메시지 출력까지 고려해야 한다.

에러메시지가 없을 때, 1개만 나올 때, 2개만 나올 때, 다 나올 때, 길이가 다를 때 등 생각보다 고려해야할 것이 많다.

[이슈]

아래 화면에서 select 를 감싸고 있는 div 에 border-left:1px solid #ddd 를 적용했다.

따라서 해당 div 높이에 따라 오른쪽 테두리가 그어지는 형태라 아래와 같은 이슈가 발생한다.

[구조]

div.birth

└ div.birth_info

　└ select

[해결]

div에 border-collapse를 적용하기 위해 display 속성을 table로 변경

.birth { display:table; width:100%; border-collapse:collapse; }
.birth_info:first-child { border-left-color:#fff; }
.birth_info { display:table-cell; width:33.3%; border:1px solid #ddd; border-width:0px 1px; box-sizing:border-box; }