[CSS] border-collapse : 셀끼리 겹치는 부분의 border 중복처리 여부 결정

블로그 포스팅을 위해 표를 만들던 중에 표 안쪽 부분의 테두리(border)가 안 생기는 현상이 있었다.
 
( 표의 가장 바깥쪽 테두리만 생김 : (ex - border:1px solid #eee) )
 
그래서 CSS 사전을 찾아가며 <table/> 의 frame 속성이나 rules 속성 등을 적용해 보았지만,
 
증상에 차도가 없었다 -.-;
 
그래서 <table/> 말고  <td/> 에 border 를 주었더니, 셀끼리 겹치는 부분의 경우 서로의 border의
 
 
두께가 합쳐져서 겹치는 부분마다 2배의 두께를 가진 border가 생겼었다.
 
이 부분을 어떻게 할까 고민하다가 CSS 사전에서 다음과 같은 속성을 발견했다.
 
 
 
  border-collapse : collapse
 
*  table 에서 사용할 수 있는 style 속성으로,
위의 경우는 겹치는 부분의 border 를 중복제거하는 설정이고,
중복해서 표시하는 경우는 border-collapse:separate 이다.
 
 
 
위의 스타일을 <table/> 에 적용하고,
<td/> 에는 별도의 border 를 정의했더니 깔끔하게 문제가 해결되었다.
 
 
 
border-collapse 의 용법과 개념 설명