Table 의 크기가 제대로 적용 되지 않을 때 ? n번째 자식의 css 수정하기





위와 같은 구조의 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 번재 자식만 변경 시킬 수 있습니다. 




위와 같이 변합니다.