<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css"/> 
  <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
    
 <style type='text/css'>
    #container { margin: 10px; overflow: hidden; }
.relativeContainer { position: relative; width: auto; height: 400px; overflow: hidden; border: 1px solid green; }

td { background-color: white; padding: 2px; }

.fixedTB { position: absolute; left: 0px; top: 0px; z-index: 11; right:100px;  }

.leftContainer { position: absolute; left: 0px; top: 52px; height: 350px; overflow: hidden;  }

.rightContainer { position: absolute; left: 165px; top: 0px; width: auto; overflow: hidden; }

.leftSBWrapper { position: relative; left: 0px; top: 0px; z-index: 10; }
.topSBWrapper { position: relative; left: 0px; top: 0px; z-index: 10; }

.SBWrapper { width: 1100px; height: 250px; overflow: auto; }

  </style>
     <style>
    #disp
    {
        font-family:garmond;
        font-size:13px;
        font-weight:bold
    }
    </style>
    
<script type="text/javascript">
function att(){
  afatt();
}
</script>
<link  rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/excite-bike/jquery-ui.css"/>
  <!-- Begin Default Content REMOVE THIS -->
  <table border="0" width="100%">
<tr>
<td width="32%" align="left" style="padding-left:3px;"><apex:image url="{!$Resource.Pratham_logo}" height="58" width="350" /></td>
<td align="center"> <font size="5" face="calibri"><b><font face="candara" color="#019dd6">Pratham Institute - Student Attendance</font></b></font></td>
<td align="right" width="33%" style="padding-right:15px;"><apex:image url="{!$Resource.PACE_logo}" height="55" width="250" /></td>
</tr></table> 

<apex:form id="frm">
<script type='text/javascript'>
$(window).load(function(){
$(function () {
    $('.SBWrapper').scroll(function () {
        var rc = $(this).closest('.relativeContainer');
        var lfW = rc.find('.leftSBWrapper');
        var tpW = rc.find('.topSBWrapper');
        
        lfW.css('top', ($(this).scrollTop()*-1));
        tpW.css('left', ($(this).scrollLeft()*-1));        
    });
});

});
</script>
<apex:actionFunction name="afsaveOnly" action="{!SaveOnly}" status="addRowStatus1" reRender="frm"/>
<apex:actionFunction name="afcancel" action="{!Cancel}" status="addRowStatus1" reRender="frm"/>
<apex:pageMessages />
 <apex:pageBlock title="Students Attendance">
<apex:outputPanel >
 <div id="container">
   <div class="relativeContainer">
       <!-- Fixed Column for both scroller -->
       <div class="fixedTB">
           <table border="1" width="164px" cellspacing="1" cellpadding="0" height="52px" >
               <tr>
                   <td width="40px">Roll No.</td>
                  <td width="50px"> Student Name</td>
                  <td width="40px">Biometric Id</td>
              </tr>
           </table>
       </div>       
       <div class="leftContainer">          
           <!-- Fixed Column for horz scroller -->
           <div class="leftSBWrapper">
               <table border="1" width="100px" cellspacing="1" cellpadding="0">
                    <apex:repeat value="{!oppTask}" var="stu">
                   <tr>
                   <td width="100px" height="50px"><apex:outputText value="{!stu.St.Student_Id__c}"/>  </td>
                   <td width="80px" height="50px">
              <apex:outputText value="{!stu.st.First_name__c} {!stu.st.Middle_name__c} 
              {!stu.st.Last_name__c}"/>
             </td>
             
             <td width="80px">
              <apex:outputText value="{!stu.st.Biometric_Id__c}"/>
             </td>
     
                        </tr></apex:repeat>
                                   </table>
            </div>
        </div>    
        <div class="rightContainer">
            <div class="topSBWrapper">
                <table border="1" width="1400px" cellspacing="1" cellpadding="0" align="center">
                   <tr>
                       <apex:repeat value="{!attdates}" var="cur_date">
                 <td><apex:outputText value="{0,date,dd'/'MM}">
       <apex:param value="{!cur_date}" /> 
     </apex:outputText>
<!--                     <apex:outputText value="{0, date, d MMM yyyy}">                    <apex:param value="{!cur_date}" />                 </apex:outputText>--> </td>
                 </apex:repeat>
                       <td><apex:outputText value="Total Attendance out of {!No_of_days}"/></td>
                       
                   </tr>
                </table>
            </div>
            <div class="SBWrapper">
                <table border="1" width="1100px" cellspacing="1" cellpadding="0" align="center" >
                  <apex:repeat value="{!oppTask}" var="stu">
                   <tr>
                      <apex:repeat value="{!stu.Att}" var="key">
                 <td align="center" height="50px">
             <apex:outputText value="{!if(stu.Att[key], 'P', 'A')}" rendered="{!NOT(edit_mode)}" style="width:40%"></apex:outputText>
             <apex:inputCheckbox value="{!stu.Att[key]}" rendered="{!edit_mode}"/>
             </td>
         </apex:repeat>
                <td width="80px" height="50px"><apex:outputtext value="{!stu.AttTotal}"></apex:outputtext></td>
                   </tr>    
                    </apex:repeat>
                  
                </table>
            </div>
        </div>
    </div>
</div>

Hope this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra