CSS fixed header, scrollable body

Question

Hi, this is not a question, actually it's a simple solution to get your table body vertically scrollable using purely css, tested only in Firefox 3.5.2, assuming correct Table DOM definitions (table, thead, tbody).

<style>
    .someTBODYclassName {
    height: 100px,
    overflow-x: hidden,
    overflow-y: visible
     }
 </style>

Of course this can be more tricky using jQuery or pure Javascript.

var maxHeightOfTBODY = your_calculations_here;
$("#TableId tbody.someTBODYclassName") //make it scrollable
  .css({
   "height": maxHeightOfTBODY+"px",
   "overflow-x": "hidden",
   "overflow-y": "visible",
   "width": "100%"
   });

Answer 1

What is the question? (FAQ)

For what you need JQuery for this case?

Look at this: http://css-tricks.com/video-screencasts/66-table-styling-2-fixed-header-and-highlighting/

Answer 2

Try this method : click here

Or try QuirksMode - click here