TABLE Vs GRID VIEW in JQM - Report in multi col multi row based.
TABLE FULL CODE:
===================
<table data-role="table" id="my-table" data-mode="reflow" style="width:100%;">
<thead >
<tr bgcolor="#0099FF" >
<th>S.No</th>
<th>Services</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#FFFFFF" >
<th>1</th>
<th> Registration</th>
<th>$ 50</th>
</tr>
<tr bgcolor="#FFFFFF" >
<th>2</th>
<th>Consultation</th>
<th>$ 100</th>
</tr>
<tr bgcolor="#FFFFFF" >
<th>3</th>
<th>X-Ray</th>
<th>$ 150</th>
</tr>
</tbody>
</table>
=========================================================================================
GRID VIEW FULL CODE:
====================
<div class="ui-grid-b" style="align:center;width:100%;margin-top:50px;" id="medigrid">
<div class="ui-block-a ui-bar-b" >S.No</div>
<div class="ui-block-b ui-bar-b" >Particular</div>
<div class="ui-block-c ui-bar-b">Amt</div>
<div class="ui-block-a ui-bar-c">1</div>
<div class="ui-block-b ui-bar-c">Doctor Consultant</div>
<div class="ui-block-c ui-bar-c">$ 50</div>
<div class="ui-block-a ui-bar-d">2</div>
<div class="ui-block-b ui-bar-d">Specialist visit</div>
<div class="ui-block-c ui-bar-d">$ 100</div>
<div class="ui-block-a ui-bar-c">3</div>
<div class="ui-block-b ui-bar-c">Lab test</div>
<div class="ui-block-c ui-bar-c">$ 200</div>
<div class="ui-block-a ui-bar-d">4</div>
<div class="ui-block-b ui-bar-d">Medicine</div>
<div class="ui-block-c ui-bar-d">$ 100</div>
<div class="ui-block-a ui-bar-c">5</div>
<div class="ui-block-b ui-bar-c">Bad charge</div>
<div class="ui-block-c ui-bar-c">$ 100</div>
<style>
.ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d
{
padding-top:5px;
padding-bottom:5px;
}
</style>
</div>
----------------------------------------------------------------------------------------
TABLE FULL CODE:
===================
<table data-role="table" id="my-table" data-mode="reflow" style="width:100%;">
<thead >
<tr bgcolor="#0099FF" >
<th>S.No</th>
<th>Services</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#FFFFFF" >
<th>1</th>
<th> Registration</th>
<th>$ 50</th>
</tr>
<tr bgcolor="#FFFFFF" >
<th>2</th>
<th>Consultation</th>
<th>$ 100</th>
</tr>
<tr bgcolor="#FFFFFF" >
<th>3</th>
<th>X-Ray</th>
<th>$ 150</th>
</tr>
</tbody>
</table>
=========================================================================================
GRID VIEW FULL CODE:
====================
<div class="ui-grid-b" style="align:center;width:100%;margin-top:50px;" id="medigrid">
<div class="ui-block-a ui-bar-b" >S.No</div>
<div class="ui-block-b ui-bar-b" >Particular</div>
<div class="ui-block-c ui-bar-b">Amt</div>
<div class="ui-block-a ui-bar-c">1</div>
<div class="ui-block-b ui-bar-c">Doctor Consultant</div>
<div class="ui-block-c ui-bar-c">$ 50</div>
<div class="ui-block-a ui-bar-d">2</div>
<div class="ui-block-b ui-bar-d">Specialist visit</div>
<div class="ui-block-c ui-bar-d">$ 100</div>
<div class="ui-block-a ui-bar-c">3</div>
<div class="ui-block-b ui-bar-c">Lab test</div>
<div class="ui-block-c ui-bar-c">$ 200</div>
<div class="ui-block-a ui-bar-d">4</div>
<div class="ui-block-b ui-bar-d">Medicine</div>
<div class="ui-block-c ui-bar-d">$ 100</div>
<div class="ui-block-a ui-bar-c">5</div>
<div class="ui-block-b ui-bar-c">Bad charge</div>
<div class="ui-block-c ui-bar-c">$ 100</div>
<style>
.ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d
{
padding-top:5px;
padding-bottom:5px;
}
</style>
</div>
----------------------------------------------------------------------------------------
No comments:
Post a Comment