December 17, 2022

CSS로 table 태그의 td 숨기기/지우기..

 


위와 같은 HTML 마크업이 있다고 가정하자. 이 때 화면의 크기가 변동할 경우, 특정 'td'를 안 보이게 하는(혹은 sytle을 주는) 방법은 아래와 같다.

CSS로 table 태그의 td 숨기기/지우기

table td#first-td { display:none; }

table td#second-td { width:100%; }

table td#third-td { display:none; }

위 CSS 예제와 같이 각각의 'td'에 '아이디명' 혹은 '클래스명'을 부여하고, CSS에서 'td' 뒤에 '아이디명' 또는 '클래스명'을 '공간없이' 붙여 준 후, Media Query에 자신이 원하는 (display:none) CSS style 속성을 주면 된다.


No comments:

Post a Comment