[CSS] safari calc (%-px) in table-cell is not working

테이블 형식의 디자인을 반응형으로 변경하면서 table 태그를 그대로 사용하기 어려운 상황이었다. 

(좌) PC 시안   /    (우) 모바일 시안

그래서 css display 속성을 이용해서 div태그로 테이블 레이아웃을 잡았다.

https://developer.mozilla.org/en-US/docs/Web/CSS/display

제목 셀에 해당하는 영역의 width를 원래는 width: calc(100% - 344px)로 잡아놨는데, disaplay: table-cell 속성이 들어가면서 이 부분이 사파리 브라우저에서 정상적으로 렌더링되지 않았다.

calc() 속성은 safari 6 (2018.04.04 최신 버전은 11.1) 이하에서 -webkit-이 필요하기 때문에 호환성의 문제는 아니었다. 그럼 도대체 뭐가 문제일까? 한 참 고민하다가, 테이블 기본 속성을 생각해보면 영역을 지정해서 넣지 않으면 자동으로 남는 셀은 나머지 영역을 차지하게 된다는 걸 떠올렸다. 그래서 서비스/직군/진행상태셀에는 특정 px값을 적고 제목 셀의 width는 지정하지 않았더니 크롬/사파리 모두 정상 출력이 되었다.

PC 버전

See the Pen [css] table layout using css by zinee (@zineeworld) on CodePen.

모바일 버전

See the Pen [css] table layout using css by zinee (@zineeworld) on CodePen.