jqTable

HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  .grid{
  }
  
  .grid{
    border:1px solid #ddd;
    width:100%;
  }
  
  
  .gridHeader{
    border:1px solid #ddd;
    width:96%;
  }
  
  .grid th, .grid td, .gridHeader th {
    border:1px solid #ddd;
  }
  
  .gridContent {
    height: 120px;
    overflow:auto;
  }
  
</style>
</head>
<body>
  <div id = "debug"></div>
  <table class="grid">
      <thead>
          <tr>
            <th>Order</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Rajesh</td>
        <td>35</td>
      </tr>
      
    </tbody>
  </table>
</body>
</html>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  .grid{
  }
  
  .grid{
    border:1px solid #ddd;
    width:100%;
  }
  
  
  .gridHeader{
    border:1px solid #ddd;
    width:96%;
  }
  
  .grid th, .grid td, .gridHeader th {
    border:1px solid #ddd;
  }
  
  .gridContent {
    height: 120px;
    overflow:auto;
  }

JavaScript

$(function() {
  var $debug = $("#debug");
  $.fn.g = function() {
    return this.each(function(){
      var $grid = $(this);

      // wrap the main grid
      $grid.wrap("<div class='gridContainer'/>");
      
      var $thead = $grid.find("thead").clone();
      
      // remove the header from the original grid
      $("thead", $grid).remove();
      
      // prepend a gridHeader before the main table
      $(".gridContainer").prepend("<table class='gridHeader'/>");
      
      // Add the thead to the grid header table
      $(".gridHeader").html($thead);
      
      // wrap the main grid in its own container.
      $(".grid").wrap("<div class='gridContent'/>");
      
      // equalize the columns
      var $headerRow = $(this).parent().prev(".gridHeader");

      // Get the first row in the grid
      var $firstRow = $(".grid").first("tr");

      // Size the body row width to header row
      $grid.find("tr:first td:visible").each(function(i) {
          $(this).width($headerRow.find("th").eq(i).width());
      });

      $headerRow.find("th").each(function(i) {
          $(this).width($firstRow.find("td").eq(i).width());
      });

      
    });
  };
});

$(function() {
  $(".grid").g();
});