How can I make an HTML TD that's set to overflow:hidden scroll smoothly with the click of a button through Javascript?

I have an HTML TD with overflow set to hidden. It's width is 850px and height is 567px. The content inside should measure 567px high and 1700px wide. I want the user to be able to click a JavaScript button that scrolls the next table that's inside the TD into view. How can I do this? I've tried document.getElementById("tilesDisplay").scrollBy(10,0) but that didn't work.

<tr>
      <td style="margin:0px; padding:0px; width:100%;" cellpadding="0px" cellspacing="0px">
          <table style="margin:0px; padding:0px; width:100%; table-layout:fixed; overflow:hidden; white-space: nowrap;" cellpadding="0px" cellspacing="0px">
              <tr>
                  <td style="background-color:#000000; vertical-align:middle; text-align:left;" onmouseover="arrow(this,1,'left');" onmouseout="arrow(this,2,'left');" onclick="ChangePortfolioImage('left');">&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/general/arrow-left.png" style="width:25px; cursor:pointer;" /></td>
                  <td id="tilesDisplay" style="background-color:#000000; width:850px; height:567px; overflow:hidden; border:solid 1px #758264;">
                      <table>
                              <tr>
                              <td style="width:850px; height:567px;">
                                  <table style="width:850px; height:567px;">
                                      <tr>
                                          <%
                                          rowCount=0
                                          for i=1 to (ubound(theseImagesSplit)-1)
                                              if rowCount=3 or rowCount=6 then
                                                 rowCount=rowCount+1
                                                  response.Write("</tr><tr>")
                                              else
                                                  if rowCount=9 then
                                                      rowCount=1
                                                      response.Write("</tr></table></td><td style=""width:850px; height:567px;""><table style=""width:850px; height:567px;""><tr>")
                                                  else
                                                      rowCount=rowCount+1
                                                  end if
                                              end if

                                              RS.Open "Select * FROM Portfolio WHERE ID=" & theseImagesSplit(i),conn
                                                  tiID=RS("ID")
                                                  tiImageURL=RS("imageURL")
                                                  tiCaption=RS("caption")
                                                  tiFrontPic=RS("frontPic")
                                                  tiCollection=RS("collection")
                                              RS.Close

                                              if cInt(tiID)=cInt(firstImage) then
                                                  tiSummary="true"
                                                  tiBorder="#3c4534"
                                              else
                                                  tiSummary="false"
                                                  tiBorder="#bdc49f"
                                              end if
                                           %>
                                                      <td style="height:150px;"><center>
                                                          <table id="thumbnail<%=i %>" class="thumbnail" style="height:132px; width:198px; cursor:pointer; border:solid 1px <%=tiBorder %>;" summary="<%=tiSummary %>" onmouseover="this.style.border='solid 1px #3c4534';" onmouseout="thumbnailOut(this);" onclick="ChangePortfolioImage('<%=tiID %>'); updateThumbnail开发者_开发百科Borders(<%=(ubound(theseImagesSplit)-1) %>,<%=i %>);">
                                                              <tr>
                                                                  <td style="border:solid 3px #000000;"><img src="<%=tiImageURL %>" style="height:130px;" /></td>
                                                              </tr>
                                                          </table>
                                                      </center></td>
                                          <%
                                          next
                                           %>
                                      </tr>
                                  </table>
                              </td>
                          </tr>
                      </table>
                  </td>
                  <td style="background-color:#000000; vertical-align:middle; text-align:right;" onmouseover="arrow(this,1,'right');" onmouseout="arrow(this,2,'right');" onclick="ChangePortfolioImage('right');"><img src="../images/general/arrow-right.png" style="width:25px; cursor:pointer;" />&nbsp;&nbsp;&nbsp;&nbsp;</td>
              </tr>
          </table>
      </td>
  </tr>

I think the easiest way would be to use a container div positioned relatively and offset the position of the container div on the button click event.

<table>
     <tr> <td>
          <div id="table-container"> <table class="subtable"> .... </table></div>
     </td> </tr>
</table>

cont = document.getElementById('table-container');
offset = 850; // Or whatever the width of the subtable

 <input onClick = "cont.style.left = cont.style.left - offset;">