반응형 테이블에 가로 스크롤 / 횡스크롤 적용 방법

반응형 웹작업에서 모바일 화면에서만 테이블에 횡스크롤을 적용하는 방법입니다. 

 

먼저 table을 div 태그로 감싸줍니다. 

<div class="table-container">
<table>
/* 테이블이 들어갑니다 */
</table>
</div>

CSS에서는 가로 스크롤을 적용하고자하는 크기의 화면을 미디워쿼리로 설정해줍니다. 

table을 감싼 div태그에 다음과 같이 설정해준뒤, 

table에는 width:auto; 를 설정해줍니다. 

 

@media screen and (max-width: 765px) and (min-width: 300px){

.table-container{
	 width:100%;	
	 overflow-x:auto;
     white-space: nowrap;
	}
   
 table{
    width:auto;
 } 
 
 }

 

*참고로 모바일에서는 스크롤이 안보이는 경우가 있는데, 그런 경우엔 이렇게 설정해줍니다. 

 

모바일에서 항상 스크롤 보이도록 하기

::-webkit-scrollbar { -webkit-appearance: none; } 
::-webkit-scrollbar:vertical { width: 12px; } 
::-webkit-scrollbar:horizontal { height: 8px; } 
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } 
::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; }

 

이렇게 하면 반응형 화면에서 원하는 크기의 화면에서만 테이블에 가로 스크롤이 생깁니다.