티스토리 뷰

웹프로그래밍/css

데이터 테이블 응답형 디자인 링크모음

공허공자 2012. 11. 15. 15:26

응답형 디자인시 데이터 테이블은 잘려보일수밖에 없는데 그에 대한 구현 모음.

+ CSS Tricks
http://css-tricks.com/responsive-data-tables/
총 3가지 구현법을 보여줍니다.
열 생략, 챠트로 대체, '탭하여 크게 보세요'링크로 대체.

+ jQuery Mobile Responsive tables
http://jquerymobile.com/branches/tables/docs/tables/index.html
중간에 API docs and demos 링크들을 하나하나 눌러보시면 데모를 보실 수 있는데
크게 2가지 구현법을 보여줍니다.
헤더를 줄마다 붙여주면서 각 열을 하나의 박스로 분리하여 세로 배열,
주요 링크 가진 열만 남기고 생략.

+ mobifreaks.com
http://mobifreaks.com/coding/responsive-data-tables-jquery/
헤더를 열마다 붙여주면서 각 줄을 하나의 박스로 분리하여 세로 배열.

+ tuts+
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/responsive-pricing-tables-using-target-for-small-screens/
열 생략, 최종적으로는 모양 대체.

+ DBUSHELL
http://dbushell.com/2012/01/05/responsive-tables-2/
헤더를 왼쪽으로 붙이고 우측 데이터 셀들을 수평 스크롤 가능하게 변형.
헤더를 왼쪽으로 붙이고 우측 데이터 셀들을 수직 배열.


'웹프로그래밍 > css' 카테고리의 다른 글

CSS 구조 개선 방법론  (0) 2014.12.16
커서 드래그 선택 블럭 강조 색상 변경  (0) 2013.04.18
IE 8~9 CSS sans-serif Bug  (0) 2012.06.21
table align center 가 firefox 에서는 안먹힌다  (0) 2011.10.06
IE, FF 에서의 padding, width 차이  (0) 2011.01.05
공유하기 링크
댓글