위와 같은 구조의 table 을 모바일에서 보이게 하기 위해서 미디어 쿼리를 적용시켜보았습니다.
하지만 table 의 크기가 제대로 조절되지 않더라구요.
아래와 같이 스크롤이 생기면서 width 가 제대로 적용되지 않습니다.
이 경우에는 width 를 수정해도 변하지 않습니다.
이 때,
위와 같은 속성을 적용 시켜주면??
table-layout:fixed;
위와 같이 width 에 맞게 적용됩니다.
1 2 3 4 | .table tr th:nth-child(1),.table tr th:nth-child(2),.table tr th:nth-child(4),.table tr th:nth-child(5), .table tr td:nth-child(1),.table tr td:nth-child(2),.table tr td:nth-child(4),.table tr td:nth-child(5){ display: none; } | cs |
css 로도 n번째 자식을 css 를 적용시키면, 아래와 같이 n 번재 자식만 변경 시킬 수 있습니다.
위와 같이 변합니다.