moving table columns

a table with prev and next to move the columns.
when i do prev and next i want the first columns (blue) not to move and remain visible all the time.
i dont want to split it into 2 tables.
pl help.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">/* <![CDATA[ */
 
#theTable {
  width: 1700px;
}
#theTable td {
  width: 170px;
}
 
/* ]]> */</style>
<script type="text/javascript">/* <![CDATA[ */
if((typeof($id)=='undefined')&&document.getElementById){
  window.$id=function(s){return document.getElementById(s)}
}
 
var horzTableScroll = {
  colWidth: 170,
  init:function(){
    if(!document.createTextNode) return;
    var controls = $id('controls');
    var link = document.createElement('a');
    link.href="#";
    link.appendChild(document.createTextNode('Prev'));
    var link2=link.cloneNode(false);
    link=controls.appendChild(link);
    controls.appendChild(document.createTextNode(' '));
    link.onclick=function(){return horzTableScroll.scroll(-1)};
    link2.appendChild(document.createTextNode('Next'));
    link2=controls.appendChild(link2);
    link2.onclick=function(){return horzTableScroll.scroll(1)};
    var scroller = $id('scroller');
    scroller.style.width='850px';
    scroller.style.overflow='hidden';
  },
  scroll:function(dir){
    var par = $id('scroller');
    var newNum = par.scrollLeft + dir*horzTableScroll.colWidth;
    if((newNum>=0) && (newNum <= $id('theTable').offsetWidth-par.clientWidth))
      par.scrollLeft = newNum;
    return false;
  }
};
 
window.onload = function(){
  horzTableScroll.init();
 
}
/* ]]> */</script>
</head>
<body>
 
<div id="controls"></div><br/>
<div id="scroller">
<table id="theTable" cellspacing="0" cellpadding="2" border="1">
  <tr>
    <td bgcolor="blue">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td bgcolor="blue">2</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td bgcolor="blue">3</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
  </tr>
  <tr>
    <td bgcolor="blue">4</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td>31</td>
    <td>32</td>
    <td>33</td>
    <td>34</td>
    <td>35</td>
  </tr>
  <tr>
    <td bgcolor="blue">5</td>
    <td colspan="2">sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td>41</td>
    <td>42</td>
    <td>43</td>
    <td>44</td>
    <td>45</td>
  </tr>
  <tr>
    <td bgcolor="blue">6</td>
    <td colspan="2">fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td colspan="3">fsfsd</td>  
    <td>54</td>
    <td>55</td>
  </tr>
</table>
</div>
 
 
</body>
</html>

Open in new window

vidhubalaAsked:
Who is Participating?
 
scrathcyboyConnect With a Mentor Commented:
Have you checked to see if these javascript operators even work in browsers other than IE?  I think most of the calls are IE specific, and won't work in other browsers.  But try them.
0
 
vidhubalaAuthor Commented:
answer not specific to my question. thanks.
0
 
vidhubalaAuthor Commented:
hi scrath,

so do u know any other way to do it? FYI it works in ie and all firefox versions..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.