Large contents within container size

I went through many posts and couldn't f开发者_开发问答ind a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).

Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.

I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.

I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.

My question is:

• Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)

• Is there any other recommendation?

---

using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.

i put a short example of this online at http://jsfiddle.net/BDZPj/

only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.

anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.