I am using JQM table in my html and included all neccesary jQuery file. Please find below my code.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jqueryMobile/jquery.mobile-1.4.2.min.css">
<link type="text/css" href="jqueryMobile/jquery.mobile.inline-svg-1.4.2.min.css" rel="stylesheet">
<script src="jqueryMobile/jquery-1.10.2.min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageten">
<div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
<h2>My Services</h2>
</div>
<div>
<input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
<input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
</div>
<br>
<div data-role="content">
<div>
<table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;">
<thead>
<tr style="font-size: 15px; text-align: center">
<th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
<th data-priority="1" style="text-align: center">Available Activation</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 15px; text-align: center">
<th style="text-align: center">0</th>
<th style="text-align: center">25</th>
</tr>
<tr style="font-size: 15px; text-align: center">
<th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
</tr>
</tbody>
</table>
</div>
</div>
<div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">
<div class="ui-block-a">
<input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
<span>Current Services</span>
</div>
<div class="ui-block-b">
<input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
<span>Add Services</span>
</div>
<div class="ui-block-c">
<input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
<span>Remove Services</span>
</div>
</div>
</div>
Please Find Image attachment, it displayed deformed table on UI Screen of simulator with red Rectangular bracket whereas it should be like in green rectangle. I am not getting reason of Why its getting distorted. Please help me with it
you need to use
data-mode="none"on your table, this will keep the high priority columns intact. and also doesnt show the option to hide the columns manually.here is the working code
hope it helps.