Таблица не вписывается в экран устройства - PullRequest
Новая
       5

Таблица не вписывается в экран устройства

1 голос
/ 20 декабря 2011

Я новый JQuery Mobile.Я реализовал таблицу. Она правильно отображается в браузерах.Но это не вписывается в экран устройства.Как решить эту проблему?пожалуйста, кто-нибудь может мне помочь.

code


< 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;} 


<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>


enter image description here

Ответы [ 3 ]

1 голос
/ 04 мая 2013

Использование 

<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke"></table>
0 голосов
/ 25 сентября 2012

Я знаю, что это старый пост, но на скриншоте видно, что текст в заголовках таблицы означает, что минимальная ширина всегда будет больше экрана.

Вы можете убрать подчеркивание междуслова или уменьшите размер шрифта, чтобы помочь подгонке текста, но это может быть бесполезно, если текст в ячейках данных снова увеличивает размер таблицы.

Хотя это обычная проблема для мобильных устройств - таблицы данныхне очень хорошо с отзывчивым дизайном.Хорошая ссылка с опциями / обходными путями может быть найдена здесь:

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

Надеюсь, что это поможет любому саналогичная проблема.

0 голосов
/ 20 декабря 2011

(Не совсем ответ, но я пока не могу оставлять комментарии) Я не уверен, подойдет ли вам это, но вы можете попробовать JQuery Mobile Grid: http://jquerymobile.com/demos/1.0rc3/#/demos/1.0rc3/docs/content/content-grids.html

Ширина будетнастроить автоматически.

...