javascript - Freezing the table header in jQuery

Question

I have the following scripts to freeze my table. This works fine in Landscape/Portrait mode of screen but when table is loaded in landscape mode and rotated to portrait, the old clone(fixed header {fix_thead}) resides with same width. On orientation change

jQuery(window).bind('orientationchange', function (e) {CheckInvTableFreeze ();}

I am calling the freeze header function again to adjust the freeze header width with new table header. On changing the orientation again multiple freezed header is appearing. How to have only one fixed table head based on my original table.

var CheckInvTableFreeze = function myfunction() {
var CiTable = $('#myTable'),
 CiThead = CiTable.find('thead'),
 fix_thead;

CiThead.find('th').each(function () {
    var el = $(this);
    el.css('width', el.width());
});
fix_thead = CiThead.clone().hide();
CiThead.after(fix_thead);
fix_thead.css(
{
    'position': 'fixed',
    'top': 0,
    'width': CiThead.width()
});
$(document).on('scrollstart', function (e) {
    if ($(this).scrollTop() > $('#myTable').offset().top) {

        fix_thead.show();
    }
    else {

        fix_thead.hide();
    }
});

Answer 1

You can try this

HTML

<div class="tableContainer">
      <header class="tableHeader">
        <table>
          <thead>
            <tr>
              <th>Aapple</th>
              <th>Bboy</th>
              <th>Ccat</th>
              <th>Ddog</th>
              <th>Eeagle</th>
              <th>Ffoxrot</th>
              <th>Ggoat</th>
            </tr>
          </thead>
        </table>
      </header>
      <div class="tableBody">
        <table>
          <tbody>
            <tr>
              <td>aaaaaaaaaaaaaaaaaaaaaaa</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>cccccccccccc</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>dddddddddddddddddddddd</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>eeeeeeeee</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>ffffffffffffffffffffffffffffffffffffffffff</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>ggggggggggggggggggg</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

CSS

.tableContainer table {
              width: 100%;
              border-collapse: collapse;
              font-size:16px;
              font-family: verdana,arial,sans-serif;
            }
            .tableContainer table tr td{border-top-color:transparent!important;}
            .tableContainer table tr th,
            .tableContainer table tr td{
                min-width: 150px;
                min-height: 20px;
                height: 20px;
                padding: 10px;
                border: 1px solid #464e54; 
                word-break: break-all;
            }

            .tableHeader {
                width: 50%;
                overflow: hidden;
            }
            .tableBody {
                width: 50%;
                height: 200px;
                overflow: auto;
            }

JQUERY

$(function(){
    $(document).ready(function(){
        $('.tableBody').scroll(function(){
             $('.tableHeader table').css('margin-left', -    $('.tableBody').scrollLeft());
        });
    });
});