Fixed Header - Scrollable Table

http://angularjs.org/

by Nitin Bhatia

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">

<div ng-controller="MyCtrl" id="table-scroll" >
  <table cellspacing="0" cellpadding="0">
   <colgroup span="7"></colgroup>

   <thead>
     <tr>
         <th><span class="text">Supervisor</span></th>
         <th><span class="text">C&amp;A</span></th>
            <th><span class="text">OOH</span></th>
            <th><span class="text">DC</span></th>
            <th><span class="text">OP</span></th>
            <th><span class="text">LT</span></th>
     </tr>
      </thead>
       <tbody>
     <tr ng-repeat="item in results">
         <td >
             <a>{{ item.name }} </a>
             
        </td>
         <td >
             {{ item.cancelAmendSummary }}
             
        </td>
         <td >
             {{ item.outOfHoursSummary }}
             
        </td>
         <td >
             {{ item.dummyCounterpartySummary }}
             
        </td>
         <td >
             {{ item.offPremisesSummary }}
             
        </td>
          <td >
             {{ item.lateTradeSummary }}
             
        </td>
     </tr>
    
 </tbody>
 </table>
</div>

</div>

CSS

td, th {
    border: 1px #ccc solid;
    margin:5px;
    padding:5px;
    width:100px;
}
/* 
#scrolldiv {
    height:50px;
    overflow:scroll;
    background:red;
} */

 #table-scroll {
  height:90px;
  overflow:auto;  
  margin-top:20px;
  width:100%  
  
}

#table-scroll table thead tr th .text {
  position:absolute;   
  z-index:2;
  height:30px;
  width:100px;
  top:0px;
}

JavaScript

window.myApp = this.angular.module('myApp', []);

var monthDays = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];

var results = [
    {
        name: "A",
        employeeId:1,
        cancelAmendSummary: '10',
        outOfHoursSummary : '0',
        offPremisesSummary : '1',
        dummyCounterpartySummary : '0',
        lateTradeSummary : '1'
    },
    {
        name: "B",
        employeeId:11,
        cancelAmendSummary: '0',
        outOfHoursSummary : '5',
        offPremisesSummary : '11',
        dummyCounterpartySummary : '0',
        lateTradeSummary : '1'
    },
    {
        name: "C",
        employeeId:21,
        cancelAmendSummary: '1',
        outOfHoursSummary : '0',
        offPremisesSummary : '5',
        dummyCounterpartySummary : '0',
        lateTradeSummary : '1'
    },
    {
        name: "D",
        employeeId:211,
        cancelAmendSummary: '11',
        outOfHoursSummary : '0',
        offPremisesSummary : '15',
        dummyCounterpartySummary : '0',
        lateTradeSummary : '1'
    }
    
    
    
]



myApp.controller('MyCtrl', function($scope) {
$scope.results = results;
});