웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] css로 만드는 내용이 하나로 합쳐지는 반응형 테이블 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] css로 만드는 내용이 하나로 합쳐지는 반응형 테이블

해피CGI윤실장 2020. 8. 21. 10:21



위의 테이블은 css로 반응형 스타일을 주어

작은 화면에서 아래의 이미지와 같이 한줄의 내용이 모두 합쳐져 하나로 출력됩니다.

 

 



사이트 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다.

아래의 미디어 쿼리 소스로 700px 이하의 너비에서 내용이 합쳐지도록 조절되며

 

 



html 소스는 크게 2부분으로 구성되어 있습니다.

1) 표 타이틀(table head)

 

 



2) 표 내용 부분

 

 



화면의 너비에 따라 출력되는 타이틀이 다르기 때문에 표 타이틀이 내용부분에서도 반복되는 것을 볼 수 있습니다.

해당 부분을 참고 하셔서 본 반응형 테이블 소스를 유용하게 사용해보세요.

 

 

 

홈페이지바로가기

Comments