테이블에 외곽선+라운딩+배경색 넣었을 때 선이 끊기는 문제

위와 같은 테이블을 html/css로 어디까지 구현 가능할까?

 

테이블의 타이틀이 되는 부분은 시맨틱 구조로 따졌을 때 caption에 css를 넣어 처리하면 된다. 문제는 테두리에 라운딩이 들어가 있다는 것이다. caption은 태그 순서로 테이블 내에 있지만 표시는 테이블 위에 들어간다. 테이블 라운딩을 주면 caption과 저렇게 함께 라운딩을 줄 수 없다.

 

그렇다면 div로 한 번 감싸서 border로 선을 넣고, border-radius로 라운딩을 주는 방법을 택했다. 또 쉐도우까지 들어가 있기 때문에 이 div에 box-shadow도 넣었다.

또한 디자인에 따라 저 테이블 caption 옆에 셀렉트 박스나 버튼이 들어가는 경우도 있어 결국 caption은 display:none; 처리를 하고, 테이블 상단에 p 태그를 추가하여 해당 테이블의 제목과, 테이블을 제어하는 셀렉트 박스나 버튼을 담는 역할을 수행하도록 했다.

 

문제는 퍼블리싱을 했을 때의 결과물이다. 

얼핏 보면 아무 문제 없어보이지만 한가지 문제가 있다. 배경색이 들어간 셀의 테두리에는 border-radius가 끊겨 보인다는 점이다.

 

흰색의 셀에는 위와 같이 명확하게 라운딩 처리된 border가 보이는데...

 

 

이렇게 색을 넣은 셀에는 라운딩 처리된 border가 끊겨서 보인다. 

이건 어떤 색을 하건 어떤 방법을 쓰건 이렇게 보이게 된다.

 

 

그래서 border-radius를 빼봤다. 그러면 아래와 같이 깔끔하게 모서리가 정상적으로 나온다.

border-radius를 뺀 테이블

즉, 배경색이 들어간 상태에서 border를 주고, 거기에다가 border-radius까지 넣으면 라운딩 처리된 모서리에 border가 끊겨 보이는 무제가 있는 것이다. 이건 기술적으로 해결 방법이 없다. html/css에서 border-radius를 처리하는 방식이 원래 저렇기 때문이다.

 

 

그런데 재미있는 것은 포토샵에서 만든 맨 위의 원본 psd 파일에서조차 자세히 보면 같은 문제가 있다는 것이다.

포토샵 원본 이미지

오른쪽 하단 부분 확대

 

결국 다른 부분에서 같은 디자인을 쓰는 곳에서는 디자이너 요청으로 background에 그냥 이미지를 까는 방식으로 처리했다. 통상 border가 들어간 영역에 radius까지 주고, 덤으로 배경색까지 넣는 경우가 많지 않다보니 생기는 문제.

 

그냥 테이블을 일반적으로 많이 쓰이는 직각 디자인으로 했을 경우에는 절대 생기지 않는 문제이다.