Frozen fields in html tables

Question

I've spent the whole day looking into this and finally decided to ask for help.

This does look like a very similar question to many on here but none of the accepted answers come close to what I need. If I'm wrong, I'd be grateful of a pointer in the right direction.

My problem is that I have a table of 20 rows (maximum) and 18 columns. The columns have a variety of content types - text, options, radio buttons...

The width of the table is much larger than can be displayed and therefore needs to scroll horizontally. I need the first 4 columns to always be visible and the remaining 14 to scroll.

An added problem is that the end users of this table will be viewing it in an iFrame, of which, I have no control of the dimensions.

I have found some, unfortunately unsuitable, pieces of code: www.shrutigupta.com/index.php/2005/12/12/how-to-create-table-with-first-column-frozen/ (the rows don't line up well)

acatalept.com/common/test/fixed-table.html (as best as I can tell, is 3 tables)

And, the one the looks most promising but without code: apex.oracle.com/pls/otn/f?p=11630:2:1883191096360711

In all cases, if you resize your window so the height is less than the height of the table, you have to scroll the window to the bottom in order to find the scroll bar to scroll the table horizontally.

What we really need, and the only thing that we can really use is exactly the method used at: www.google.com/squared/search?q=world+leaders If you resize the window on this page, the scroll bar will show up at the bottom for just the columns that need it.

Please help, this project is driving me mad!

Answer 1

use css scroll for overflow for which ever columns need to be scrolled and others be hidden

Try to put the table or tds inside div and apply style for overflow

Answer 2

<table width="100%">
<tr>
<td id="200px">some fixed content</td>
<td>
      <table>
           create rows and table inside this table
      </table>
</td>
</tr>

</table>

Answer 3

DataTables is now supporting ColVis, which allows you to show/hide columns as well as fixed header/fixed columns. It's not the scrolling you're looking for necessarily, but may be a more elegant solution to your problem. With the amount of data you'd dealing with, you could also take advantage of the sorting, filtering, and paging to make it a little easier for the end-user to consume.