CODEWITHSUNDEEP
jquery-mobile
naresh
naresh

Reputation: 10392

Table is not fitted in the device screen

I am new jquery mobile. I implemented the table.it is displaying in the browsers correctly. But it is not fitted in the device screen. How to solve this issue? please can anybody help me. 

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>

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

enter image description here

Upvotes: 1

Views: 4544

Answers (4)

sachin bavalekar
sachin bavalekar

Reputation: 1

Use the CSS property word-break: break-all:

table th, td {
  text-align:left;
  padding:6px;
  word-break: break-all;
}

Upvotes: 0

malintha
malintha

Reputation: 176

Use 

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

Upvotes: 1

KevD
KevD

Reputation: 717

I know this is an old post but it looks from the screenshot that the text in the table headers mean that the minimum width is always going to be more than the screen.

You could remove the underscores between words or reduce the font-size to help the text fit but this might be of no use if the text in the data cells expands the table size again.

This is a common issue with mobile devices though - data tables don't play well with responsive designs. A good link with options / workarounds can be found here:

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

Hope this helps anybody with a similar issue.

Upvotes: 0

MartijnvdB
MartijnvdB

Reputation: 1002

(Not really an answer, but I can't post comments yet) I am not sure if this will do for you, but you could try the JQuery Mobile Grid's: http://jquerymobile.com/demos/1.0rc3/#/demos/1.0rc3/docs/content/content-grids.html

The width will adjust automatically.

Upvotes: 0

Related Questions