테이블이 장치 화면에 맞지 않습니다.

Question

저는 새로운 jquery 모바일입니다. 테이블을 구현했습니다. 브라우저에 올바르게 표시됩니다. 그러나 장치 화면에는 맞지 않습니다. 이 문제를 해결하는 방법? 아무도 나를 도와 줄 수 없어.

code 

< HTML>

< head>

< meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Single page template</title>    
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>     

<style type="text/css"> 
    table { width:100%; }  
    table th, td { text-align:left; padding:6px;} 

</head>

< body> 012,351을

6,

<div data-role="page" id="Calorie_Tracker"> 

    <div data-role="header" data-theme="b" > 
     <a data-role="button" data-rel="back" data-icon="back">back</a> 
     <h1>Calorie Tracker</h1> 
    </div> 

    <div data-role="content">       
      <table border="1" > 
       <tr> 
        <th>Date</th> 
        <th>Food_Intake</th> 
        <th>Calories_Burned</th> 
        <th>Net</th> 
       </tr> 

       <tr> 
        <td>Dec20</td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr>      
      </table>    
    </div> 

</div> 

</BODY>
</HTML>

Answer 1

나는이 위해 할 경우 확실하지 오전 (별로 대답,하지만 난 아직 의견을 게시 할 수 없습니다) JQuery Mobile Grid를 사용해 볼 수도 있습니다. http://jquerymobile.com/demos/1.0rc3/#/demos/1.0rc3/docs/content/content-grids.html

너비가 자동으로 조정됩니다.

Answer 2

나는 오래된 게시물 인 것을 알고 있지만 스크린 샷에서 테이블 헤더의 텍스트는 최소 너비가 항상 화면보다 커야 함을 의미합니다.

단어 사이에 밑줄을 제거하거나 텍스트 크기를 줄이려면 글꼴 크기를 줄여도되지만 데이터 셀의 텍스트가 테이블 크기를 다시 확장하는 경우에는 유용하지 않을 수 있습니다.

모바일 장치의 일반적인 문제입니다. 데이터 테이블이 반응 형 디자인과 잘 작동하지 않습니다. 옵션/해결 방법과 함께 좋은 링크는 여기에서 찾을 수 있습니다 :

http://css-tricks.com/responsive-data-tables/

희망이 유사한 문제로 사람을 도움이됩니다. 열 이름도 공백이 없습니다 - -

Answer 3

사용

는

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke"></table>