이전 목록 다음
채택완료

[반응형 CSS] 화면 크기에 따라서 요소 보이기/숨기기

해피정
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전 10,188

<style>

@media (max-width: 400px) {
#attendance_list .hidden {
  width: 0 !important;
  display: none !important;
}
}
@media screen and (min-width: 401px) {
#attendance_list .hidden {
}
}

</style>

 

<div id="attendance_list">

<table>

    <tr>

        <td>하나</td>

        <td class="hidden">두울</td>

        <td>세엣</td>

    </tr>

</table>

</div>

 

브라우저 화면에 따라서 작은 화면(모바일)일때는 한줄을 안보이게 하려고 합니다.

이렇게 하면 될까 싶어서 구현해봤는데,

작은화면일때 안보이기는 하는데, 큰 화면으로 변경되도 계속 안보이네요

무엇을 변경해야 브라우저 화면을 변경함에도 잘 작동할까요?

css media display 반응형
|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트
bonobono
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전

잘작동하네요!

답변에 대한 댓글 1개

해피정
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전
Opera 브라우저에서는 화면창이 일정크기 이상으로는 작아지지 않아서 안되는줄 알았습니다. ㅠㅠ
댓글보고 IE와 Chrome 에서 실행해보니 잘 작동하네요

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