<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Snippet - Bootsnipp.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.fix-table .table-responsive {
height: calc(100vh - 250px) !important;
position: relative;
width: 100%;
overflow-y: hidden;
}
.fix-table .table-responsive th, .fix-table .table-responsive td {
width: 300px !important;
min-width: 300px !important;
font-size: 14px;
}
.fix-table .table-responsive table {
margin: 0;
}
.fix-table .table-fix-top {
position: absolute;
top: 0;
z-index: 99;
background: #ffffff;
}
.fix-table .table-fix-body {
overflow-y: auto;
height: calc(100vh - 250px) !important;
overflow-x: hidden;
width: fit-content;
}
.fix-table .table-fix-bottom {
position: absolute;
bottom: 0;
z-index: 99;
background: #ffffff;
}
.fix-table tbody tr td:nth-child(1), .fix-table thead tr:nth-child(1) th:nth-child(1), .fix-table tfoot td:nth-child(1) {
position: relative;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="fix-table">
<div class="table-responsive">
<div class="table-fix-top">
<table id="generic-table" class="table">
<thead>
<tr>
<th class="fix-col" rowspan="2" colspan="1" style="text-align: left; width: 300px; min-width: 300px; ">
<div class="table-head">Company Name</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Apr</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">May</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Jun</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Jul</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Aug</div>
</th>
</tr>
<tr>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
</tr>
</thead>
</table>
</div>
<div class="table-fix-body">
<table id="generic-table" class="table">
<thead>
<tr>
<th class="fix-col" rowspan="2" colspan="1" style="text-align: left; width: 300px; min-width: 300px; ">
<div class="table-head">Company Name</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Apr</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">May</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Jun</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Jul</div>
</th>
<th rowspan="1" colspan="4" style="text-align: center;">
<div class="table-head">Aug</div>
</th>
</tr>
<tr>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Invoices</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Item Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Tax Amount</div>
</th>
<th rowspan="1" colspan="1" style="text-align: right; width: 200px; min-width: 200px;">
<div class="table-head">Total Amount</div>
</th>
</tr>
</thead>
<tbody class="table-header-group">
<tr class="">
<td rowspan="1" colspan="1">
<div class="" style="text-align: left;">BIKANO</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">145</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1473949.45</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">175640.35</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1649589.8</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">364</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1328751.52</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">164205.48</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1492957.0</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">976</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1431154.26</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">174527.44</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1605681.7</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1466</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1989743.55</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">225232.46</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">2214976.01</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1603</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">2846942.03</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">285520.47</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">3132462.5</div>
</td>
</tr>
<tr class="">
<td rowspan="1" colspan="1">
<div class="" style="text-align: left;">DERBY</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">93</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">982453.2</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">121785.42</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1104238.62</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">79</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">778882.6</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">97396.28</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">876278.88</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">79</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">688950.44</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">84976.19</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">773926.63</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">71</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">930201.33</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">115184.2</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1045385.53</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">82</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">510143.76</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">61322.54</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">571466.3</div>
</td>
</tr>
<tr class="">
<td rowspan="1" colspan="1">
<div class="" style="text-align: left;">FRESH</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">55</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">117090.63</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">21075.42</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">138166.05</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">26</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">115814.63</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">20846.33</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">136660.96</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">28</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">209188.16</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">37653.79</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">246841.95</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">16</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">56881.25</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">10238.59</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">67119.84</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">10</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">9682.38</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">1742.85</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">11425.23</div>
</td>
</tr>
<tr class="">
<td rowspan="1" colspan="1">
<div class="" style="text-align: left;">KRAVOUR</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">100</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">248750.1</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">44775.8</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">293525.9</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">80</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">209828.53</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">37769.81</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">247598.34</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">84</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">223952.54</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">39910.96</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">263863.5</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">296</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">381183.5</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">68499.1</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">449682.6</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">267</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">344356.1</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">61850.42</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">406206.52</div>
</td>
</tr>
<tr class="">
<td rowspan="1" colspan="1">
<div class="" style="text-align: left;">SHUBHLAKSHMI</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">9</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">102159.36</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">5107.95</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">107267.31</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">4</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">44509.72</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">2225.49</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">46735.21</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">4</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">16428.48</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">821.42</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">17249.9</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">10</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">81969.48</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">4098.47</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">86067.95</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">2</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">8428.68</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">421.43</div>
</td>
<td rowspan="1" colspan="1">
<div class="" style="text-align: right;">8850.11</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="text-align: left; font-weight: bold;">Totals:</td>
<td style="text-align: right; font-weight: bold;">402</td>
<td style="text-align: right; font-weight: bold;">₹29,24,402.74</td>
<td style="text-align: right; font-weight: bold;">₹3,68,384.94</td>
<td style="text-align: right; font-weight: bold;">₹32,92,787.68</td>
<td style="text-align: right; font-weight: bold;">553</td>
<td style="text-align: right; font-weight: bold;">₹24,77,787.00</td>
<td style="text-align: right; font-weight: bold;">₹3,22,443.39</td>
<td style="text-align: right; font-weight: bold;">₹28,00,230.39</td>
<td style="text-align: right; font-weight: bold;">1171</td>
<td style="text-align: right; font-weight: bold;">₹25,69,673.88</td>
<td style="text-align: right; font-weight: bold;">₹3,37,889.80</td>
<td style="text-align: right; font-weight: bold;">₹29,07,563.68</td>
<td style="text-align: right; font-weight: bold;">1859</td>
<td style="text-align: right; font-weight: bold;">₹34,39,979.11</td>
<td style="text-align: right; font-weight: bold;">₹4,23,252.82</td>
<td style="text-align: right; font-weight: bold;">₹38,63,231.93</td>
<td style="text-align: right; font-weight: bold;">1964</td>
<td style="text-align: right; font-weight: bold;">₹37,19,552.95</td>
<td style="text-align: right; font-weight: bold;">₹4,10,857.71</td>
<td style="text-align: right; font-weight: bold;">₹41,30,410.66</td>
</tr>
</tfoot>
</table>
</div>
<div class="table-fix-bottom">
<table id="generic-table" class="table">
<tfoot>
<tr>
<td style="text-align: left; font-weight: bold;">Totals:</td>
<td style="text-align: right; font-weight: bold;">402</td>
<td style="text-align: right; font-weight: bold;">₹29,24,402.74</td>
<td style="text-align: right; font-weight: bold;">₹3,68,384.94</td>
<td style="text-align: right; font-weight: bold;">₹32,92,787.68</td>
<td style="text-align: right; font-weight: bold;">553</td>
<td style="text-align: right; font-weight: bold;">₹24,77,787.00</td>
<td style="text-align: right; font-weight: bold;">₹3,22,443.39</td>
<td style="text-align: right; font-weight: bold;">₹28,00,230.39</td>
<td style="text-align: right; font-weight: bold;">1171</td>
<td style="text-align: right; font-weight: bold;">₹25,69,673.88</td>
<td style="text-align: right; font-weight: bold;">₹3,37,889.80</td>
<td style="text-align: right; font-weight: bold;">₹29,07,563.68</td>
<td style="text-align: right; font-weight: bold;">1859</td>
<td style="text-align: right; font-weight: bold;">₹34,39,979.11</td>
<td style="text-align: right; font-weight: bold;">₹4,23,252.82</td>
<td style="text-align: right; font-weight: bold;">₹38,63,231.93</td>
<td style="text-align: right; font-weight: bold;">1964</td>
<td style="text-align: right; font-weight: bold;">₹37,19,552.95</td>
<td style="text-align: right; font-weight: bold;">₹4,10,857.71</td>
<td style="text-align: right; font-weight: bold;">₹41,30,410.66</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.fix-table .table-responsive').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('.fix-table thead tr:nth-child(1) th:nth-child(1)').css("left", -$(".fix-table .table-responsive").scrollLeft()); //fix the thead relative to the body scrolling
var first_col = $('.fix-table thead .fix-col');
first_col.attr('rowspan', 2);
first_col.css("left", $(".fix-table .table-responsive").scrollLeft()); //fix the first cell of the header
$('.fix-table .table-responsive td:nth-child(1)').css("left", $(".fix-table .table-responsive").scrollLeft()); //fix the first column of tdbody
});
});
</script>
</body>
</html>
