정보실

웹학교

정보실

그누보드 반응 형 HTML 테이블 기법 및 예제

본문

1. https://codepen.io/karks88/pen/jGrjdW

다음은 모바일 사용자가 매우 넓은 테이블에 액세스 할 수있게 해주는 매우 쉬운 방법입니다. overflow-x 속성이 auto로 설정된 컨테이너 요소를 추가하면 작은 화면에서 가로로 스크롤 할 수 있습니다.


2. https://codepen.io/geoffyuen/pen/FCBEg

이 방법은 스크롤링보다 사용자 친화적이지만 설정이 어렵습니다. 모바일 화면에서 각 td 셀은 블록으로 표시되므로 서로 쌓아 올릴 수 있습니다.


3. https://codepen.io/alico/pen/bpLgOL

data-th 속성을 사용하는 대신 표 머리글 항목은 CSS content 속성을 통해 정의됩니다.


4. https://codepen.io/JasonAGross/pen/rjmyx

CSS를 통해 왼쪽으로, 작은 화면에 정적으로 위치합니다.


5. https://codepen.io/tomhodgins/pen/akrRqX

요소 쿼리는 브라우저 창의 크기가 아니라 특정 요소의 크기 요구 사항에 초점을 둡니다.


6. https://codepen.io/SitePoint/pen/xbvWQv

데이터 테이블 jQuery 플러그인은 모든 종류의 유용한 기능을 표준 HTML 테이블에 추가합니다. 그리고 그 반응 능력은 아주 훌륭합니다.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 136회 ]  작성일18-05-07 23:08

웹학교