분류
그누보드
반응 형 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 테이블에 추가합니다. 그리고 그 반응 능력은 아주 훌륭합니다.
- 이전글대화식 SVG 마스크 (전체 화면 이미지 포함) 18.05.08
- 다음글Grid to Flex 18.05.07