모바일 환경이 되면 collapse 되어서 글자가 깨지지 않도록 하려하고 있습니다.

ex) 메뉴 1 메뉴2 메뉴3  메뉴4   => 메뉴1 메뉴2 메뉴3
                                               메뉴4 메뉴5 메뉴6

부트스트랩 히든 테이블 처럼 테이블을 두개 따로 설정을 해서 모바일 만해지면 웹 페이지 테이블이 안보이고 모바일 용 테이블이 보이는 식으로 해야할지...
아니면 반응형으로 하는 방법이 있을지...

 

이것이 css 부분입니다. collapse 가 안되고 화면이 줄어들면 맨오른쪽 부분이 짤리고 글자가 세로로 써질만큼 작아집니다.

<style >

    table {
    	box-sizing: border-box;
    	position : relative;
    	
		border-collapse: collapse;
    	
       	border-top: 1px solid #ccc;
  		padding : 0.1em;
        border-spacing: 0px;
	}
     th {
  	
    font-size: 0.8em;
	
    font-weight: bold;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    text-align: center;
    border-left : 0px;
    border-right: 0px;
   
  	}
  	td {
  	font-size: 0.8rem;
    text-align: center;
    border-left : 0px;
    border-right: 0px;
    vertical-align: top;
    border-top: 1px solid #ccc;
  	
  	}