Sync Scrolling of table

by Allan P

HTML

<div id="wrap">
  <p class="bld">Scroll either table horizontally<br>
  to show synced scroll</p>
  <div id="T1">
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="500">
      <tr>
        <td width="5%">1</td>
        <td width="5%">2</td>
        <td width="5%">3</td>
        <td width="5%">4</td>
        <td width="5%">5</td>
        <td width="5%">6</td>
        <td width="5%">7</td>
        <td width="5%">8</td>
        <td width="5%">9</td>
        <td width="5%">10</td>
        <td width="5%">11</td>
        <td width="5%">12</td>
        <td width="5%">13</td>
        <td width="5%">14</td>
        <td width="5%">15</td>
      </tr>
      <tr>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
      </tr>
      <tr>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
      </tr>
      <tr>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td width="5%">&nbsp;</td>
        <td...

CSS

body {
  font-family: arial, helvetica, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #000;
  text-align: left;
  margin: 3px 0px;
}

#wrap {
  width: 500px;
  height: 500px;
  margin: 20px;
}

#T1,
#T2 {
  border: 2px solid #00F;
  width: 200px;
  height: auto;
  clip: auto;
  overflow: auto;
  margin-top: 20px;
}

#T1 td,
#T2 td {
  text-align: center;
}

.bld {
  font-size: 18px;
  font-weight: bold;
  color: #00F;
}

JavaScript

var T1Obj=document.getElementById("T1");
 var T2Obj=document.getElementById("T2");
 var msgObj=document.getElementById("msg");
 if (typeof addEventListener !="undefined") 
  { T1Obj.addEventListener('scroll', getScroll);
    T2Obj.addEventListener('scroll', getScroll); }   
  else
   { T1Obj.attachEvent('onscroll', getScroll);
     T2Obj.attachEvent('onscroll', getScroll); }
 // --------  
 function getScroll(event)
  { if(event.type==="scroll")
     { var elem=(event.srcElement)? event.srcElement : event.target; 
       if(elem.id==="T1")
        { T2Obj.scrollLeft=elem.scrollLeft; }                      
       else if(elem.id==="T2")
        { T1Obj.scrollLeft=elem.scrollLeft; }  
      }  
     msgObj.innerHTML=elem.scrollLeft;
  } 
// ------