테이블을 모바일 뷰에서 보여주는 방법 how to show table in mobile view(control responsive table)
table .. PC일 땐 참 좋은데 이게 모바일에선 보기 좋지 않다 ..
그럼에도 모바일에서도 보여줘야 한다면 어떻게 해야 할까? 라는 고민에 답.
1. Bootstrap과 같은 라이브러리를 이용해 반응형 테이블을 사용한다.
부트스트랩 table-responsive 관련 링크 : https://getbootstrap.com/docs/4.4/content/tables/
이 table-responsive를 조금 더 자유자재로(생각대로) 사용하고 싶다면 다음 링크를 참고하면 좋다.
2. jQuery를 이용해서 모바일의 경우에는 따로 처리해준다.
해당 함수는 화면의 크기가 바뀔 때마다 그걸 감지해 함수를 호출한다.
$( window ).resize(function(){
});
따라서 아래와 같은 코드를 이용하면 모바일일 때 div 값을 삭제, 추가 등의 함수를 불러와 보다 자유롭게 모바일 화면을 구성할 수 있다.
$( window ).resize(function(){
var windowWidth = $( window ).width
if( windowWidth < 500 ) {
// width값이 500 미만일 때
} else {
// width값이 500 이상일 때
}
});
참고 링크 : https://kkotkkio.tistory.com/52
댓글
댓글 쓰기