How to fixed the table header and columns jQuery

We used HTML tag for creating table. Create three different tables for fixed header, fixed column and other columns.

Create table structure

View Demo

 

<div class="fixedTable" id="demo">
// add below structures here
</div>
<header class="fixedTable-header">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th>F</th>
          <th>G</th>
          <th>H</th>
          <th>I</th>
          <th>J</th>
          <th>K</th>
          <th>L</th>
        </tr>
      </thead>
    </table>
  </header>
<div class="fixedTable-body"">
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
        
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
          <td>e</td>
          <td>f</td>
          <td>g</td>
          <td>h</td>
          <td>i</td>
          <td>j</td>
          <td>k</td>
          <td>l</td>
        </tr>
      </tbody>
    </table>
  </div>

 

Now we used jQuery to fixed the header and column

(function() {
  var demo, fixedTable;

  fixedTable = function(el) {
    var $body, $header, $sidebar;
    $body = $(el).find('.fixedTable-body');
    $sidebar = $(el).find('.fixedTable-sidebar table');
    $header = $(el).find('.fixedTable-header table');
    return $($body).scroll(function() {
      $($sidebar).css('margin-top', -$($body).scrollTop());
      return $($header).css('margin-left', -$($body).scrollLeft());
    });
  };

  demo = new fixedTable($('#demo'));

}).call(this);

CSS Style:

.fixedTable .table {
  background-color: white;
  width: auto;
}
.fixedTable .table tr td,
.fixedTable .table tr th {
  min-width: 100px;
  width: 100px;
  min-height: 20px;
  height: 20px;
  padding: 5px;
}
.fixedTable-header {
  width: 510px;
  height: 30px;
  margin-left: 110px;
  overflow: hidden;
  border-bottom: 1px solid #CCC;
}
.fixedTable-sidebar {
  width: 110px;
  height: 310px;
  float: left;
  overflow: hidden;
  border-right: 1px solid #CCC;
}
.fixedTable-body {
  overflow: auto;
  width: 510px;
  height: 310px;
  float: left;
}

 

 

 

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.