Responsive Grid / Table responsive
Only need to change bootstrap file path
<!DOCTYPE html>
<html>
<head>
<title>Search Results</title>
<!-- this is CDN so if not avilable css files here you will give your css comman paths -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
/* this code for custom css file */
.tablesorter th{ background:#e6eeee;}
.tablesorter, .tablesorter td, .tablesorter th{ border-collapse:collapse !important; border:solid 1px #ccc !important; text-align:center;vertical-align:middle !important;}
.pagination > li > a.active{ background-color:#eee !important;}
table.tablesorter tr:nth-child(even) {
background-color:#f3f1f1;
}
table.tablesorter tr:nth-child(odd) {
background-color:#fff;
}
.detailsnow{ padding:15px 20px; background:#e6eeee; margin:6px 0px !important; text-align:center;}
/*.detailsnow p a{ font-weight:bold; color:##337ab7; font-size:16px;}*/
.detailsnow p{ font-weight:bold; font-size:15px}
.bussearcharea{ padding:15px 20px; background:#e6eeee; margin:6px 0px !important; text-align:center;}
.busrow-odd{background-color:#f3f1f1; padding-top:8px; padding-bottom:8px; margin-left:0px !important; margin-right:0px !important;}
.busrow-even{background-color:#fff; padding-top:8px; padding-bottom:8px; margin-left:0px !important; margin-right:0px !important;}
.margin0px{ margin :0px !important;
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="tablesorter table table-striped" >
<thead>
<tr>
<th class="header">Order Id</th>
<th class="header">IPex Order Id </th>
<th class="header">Product Name</th>
<th class="header">Product Id</th>
<th class="header">Quantity</th>
<th class="header">Unit Price</th>
<th class="header">Total Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">10229</td>
<td>32 Inches LCD TV - Samsung</td>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">3</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 120</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 360</td>
</tr>
<tr>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">10229</td>
<td>32 Inches LCD TV - Samsung</td>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">3</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 120</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 360</td>
</tr>
<tr>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">10229</td>
<td>32 Inches LCD TV - Samsung</td>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">3</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 120</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 360</td>
</tr>
<tr>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">10229</td>
<td>32 Inches LCD TV - Samsung</td>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">3</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 120</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 360</td>
</tr>
<tr>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">10229</td>
<td>32 Inches LCD TV - Samsung</td>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">3</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 120</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 360</td>
</tr>
<tr>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">10229</td>
<td>32 Inches LCD TV - Samsung</td>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">3</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 120</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 360</td>
</tr>
<tr>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">10229</td>
<td>32 Inches LCD TV - Samsung</td>
<td align="left" valign="top">10229</td>
<td align="left" valign="top">3</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 120</td>
<td align="left" valign="top"><em class="fa fa-inr"></em> 360</td>
</tr>
<tr>
<td style="text-align:right" align="right" valign="top" colspan="6"><strong>Total</strong></td>
<td><i class="fa fa-inr"></i> 33,909.00</td>
</tr>
</tbody>
</table>
</div>
<!-- <div class="nav pull-right">
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div> -->
</body></html>
