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

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

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

 

 

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

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

 

 

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

1) 표 타이틀(table head)

 

 

2) 표 내용 부분

 

 

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

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