반응형
테이블 형식의 디자인을 반응형으로 변경하면서 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.
반응형
'개발일지 > CSS' 카테고리의 다른 글
[CSS] ios chrome/safari input placeholder 세로정렬 (0) | 2018.09.05 |
---|---|
[CSS] 카카오톡 이모티콘샵 좋아요 인터랙션 (0) | 2018.06.11 |
[CSS] ':first-of-type', ':nth-of-type()' not working (0) | 2018.03.07 |
[CSS] border-color inherits from color property (0) | 2018.02.27 |
[CSS] 'fi' letter-spacing ligature(합자) 이슈 (0) | 2017.07.07 |