[CSS] 모바일에서 표만 가로스크롤 주기

모바일에서 표를 보여줄 때, 넓이를 더이상 줄일수 없는 경우가 있는데,(줄일수 없거나 보여줘야 하는)

이때는 보통 min-width:값 를 사용하게 되는데, 이는 넓이를 줄이더라도 값 까지만 줄이라는 뜻이다.

 

이렇게 되면 페이지 전체에 가로스크롤이 생기게 된다.  

이 문제를 해결하기 위해 아래와 같은 방법을 사용한다. 

 

overflow-x: auto;

 

위 코드를 표를 감싸고 있는 width값이 별도로 지정되어 있지 않는 부모요소 값이 지정되어 있어도

표 부분만 가로스크롤이 생기게된다. 

 

※ 블럭요소에서 width값이 별도로 지정되어 있지 않으면 기본값인 auto로 동작하기때문에 100%가 된다. 

 

<div style="overflow-x:auto"><!--부모요소-->
	<table style="min-width:500px;width100%">
		...
		...
	</table>
</div>