[문제해결] border-collapse와 border-radius가 충돌할 때

table {
  border-collapse : collapse;
}

일부 브라우저에서  table의 border-collapse적용할 때 

border-collapse와  border-radius가 충돌하여

table의 border-radius 안먹을 수 있다고 한다.

 

 

첫번째 해결방법 -   border-top-left-radius 사용

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

(왼쪽위에있는 td) {
  border-top-left-radius : 5px;
}

 

 

두번째 해결방법 - box-shadow 사용

table {
  border-collapse : collapse;
  border-radius : 7px;
  border-style : hidden;
  box-shadow : 0 0 0 1px #666;
}