채택완료

반응형 테이블 TH, TD 숨기기

2018-02-04 (일) 20:14:12 18,846

안녕하세요.

반응형은 잘 몰라서 질문 올립니다.

사실은 많은 분야 모르는 짜집퍼라...

화면이 작아지면 예를 들어 가로 768PIXEL 이하이면 사진에 빨간색 사각형 친 한국 프리미엄 부분 TH와 TD 부분을 지우거나 안보이게 하고 싶습니다.

@media all and (max-width:768px) {) 안에 어떻게 해야 하나요?

화면이 좁아지니 한부분을 안보이게 하는거죠.

CSS 파일 어떻게 수정해야 할까요?

읽어 주셔서 고맙습니다.

1970211458_1517742795.0244.png

답변 4개 / 댓글 2개

채택된 답변
+20 포인트

해당 td th에 class를 준다음에 

미디어쿼리안쪽에서 해당 class를 display:none 을 주시면 될거 같습니다.

답변에 대한 댓글 2개

질문하기전부터 해봤는데
tr의 th는 안보이는데 tr의 td는 계속 보이네요,
어제 질문하기전에는 안되더니 심야에 되네요.
분명 display:none; 일것 같았지만 안되고 구글 검색도 해보고 했는데요.
안될때 캐시도 지워봤고요.

여하튼 안되다 나중에 되는거 보니 황당하지만 여하튼 다행입니다.

답변 고맙습니다.
2018-02-05 (월) 07:13:41

말씀하신대로 한국프리엄에 해당하는 th,td 부분에 클래스명을 뿥이시고 display:none을 하셔도 되고,

애초에 테이블자체를 반응형으로 수정하는 것도 가능합니다.

부트스트랩의 경우 반응형 테이블은 가로스크롤이 가능하게 만들어버려서 숨기지 않고 스크롤하면서 보게 해놓습니다.

저때 한번이라면 last-child 를 쓰시는 건 어떤가요?

Copy
:last-child{display:none}

이런식은 어떤가요??

th 와 td에 각각 클래스를 주셔야 합니다. display:none 하시면 되고요 ..안되면 !important 붙여보시고요

답변을 작성하려면 로그인이 필요합니다.