Fixed table header with horizontal AND vertical scrolling body

You are cloning the table for fix header, better you can direct fix the header of original table which will results the same.

Element with position:fixed changes the width with respect to viewport, which results width gets change on scrolling as you can check here https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/19

Approach:1

instead of position:fixed use relative in th and it is working with your parent div which has min-height:100px.

https://jsfiddle.net/chourasiapawankumar/krw0qpbL/62/

Approach:2

You can see both horizontal and vertical scroll bar at a time on removing min-height of parent div which I have commented in the below fiddle.

https://jsfiddle.net/chourasiapawankumar/vg7q3tyc/33/


Dunno if you can/want to use a library, but floatHead works nicely and it looks like it does what you want... Go on the linked page and click the Demo "Run FloatHead" button, you will see it in action.


The most common trick for scrollable tables is to create a clone of the table and display the <thead> from first clone and <tbody> from the second. This is done to ensure that both sections have identical structure and column widths. The following uses this idea + sticky positioning:

$(function() {
  $(".fixed_headers").each(function() {
    $(this).wrap("<div class='scrollable-table'></div>");
    $(this).clone().insertBefore(this);
  });
});
@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);

.scrollable-table {
  overflow: auto;
  max-height: 250px;
}

.scrollable-table table:nth-child(1) {
  position: sticky;
  left: 0;
  top: 0;
  background-color: #fff;
  margin-bottom: 0;
}

.scrollable-table table:nth-child(1) tbody {
  visibility: collapse;
}

.scrollable-table table:nth-child(2) thead {
  visibility: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p style="text-align: center;">Best viewed in full page</p>
<div class="container">
  <table class="table table-condensed table-bordered table-hover fixed_headers">
    <thead>
      <tr>
        <th class="nb_custom_th">Store_Country</th>
        <th class="nb_custom_th">Brand</th>
        <th class="nb_custom_th">Product Description</th>
        <th class="nb_custom_th">12</th>
        <th class="nb_custom_th">df</th>
        <th class="nb_custom_th">trr</th>
        <th class="nb_custom_th">Tax onlatest periodofthe fiscal17</th>
        <th class="nb_custom_th">df1</th>
        <th class="nb_custom_th">121</th>
        <th class="nb_custom_th">4455tre4</th>
        <th class="nb_custom_th">4455tre41</th>
        <th class="nb_custom_th">4455tre42</th>
        <th class="nb_custom_th">4455tre43</th>
        <th class="nb_custom_th">4455tre431</th>
        <th class="nb_custom_th">4455tre433</th>
        <th class="nb_custom_th">4455tre434</th>
        <th class="nb_custom_th">4455tre435</th>
        <th class="nb_custom_th">4455tre436</th>
        <th class="nb_custom_th">4455tre437</th>
        <th class="nb_custom_th">4455tre438</th>
        <th class="nb_custom_th">4455tre439</th>
        <th class="nb_custom_th">4455tre4310</th>
        <th class="nb_custom_th">4455tre4311</th>
        <th class="nb_custom_th">4455tre4312</th>
        <th class="nb_custom_th">4455tre4313</th>
        <th class="nb_custom_th">4455tre4314</th>
        <th class="nb_custom_th">4455tre4315</th>
        <th class="nb_custom_th">4455tre4316</th>
        <th class="nb_custom_th">4455tre4317</th>
        <th class="nb_custom_th">4455tre43171</th>
        <th class="nb_custom_th">Tax on latest period of the fiscal15</th>
        <th class="nb_custom_th">Tax on latest period of the fiscal16</th>
        <th class="nb_custom_th">Taxon latest period ofthefiscal18</th>
        <th class="nb_custom_th">Taxon latest period ofthefiscal181</th>
      </tr>
    </thead>
    <tbody>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple iPad 4 16GB Wi-Fi + Cellular</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
      </tr>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple iPad Air</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
      </tr>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple iPad Mini</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
      </tr>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple IPhone 4S 64GB</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
      </tr>
    </tbody>
  </table>
</div>

Tags:

Javascript

Html

Css

Jquery

Twitter Bootstrap

Recent Posts