How can I let a table's body scroll but keep its head fixed in place?

javascript html css html-table
minty picture minty · Sep 25, 2008 · Viewed 226.9k times · Source

I am writing a page where I need an HTML table to maintain a set size. I need the headers at the top of the table to stay there at all times but I also need the body of the table to scroll no matter how many rows are added to the table. Think a mini version of excel. This seems like a simple task but almost every solution I have found on the web has some drawback. How can I solve this?

Answer

Ken Penn picture Ken Penn · Sep 29, 2008

I had to find the same answer. The best example I found is http://www.cssplay.co.uk/menu/tablescroll.html - I found example #2 worked well for me. You will have to set the height of the inner table with Java Script, the rest is CSS.

Related questions

Change background color of table cells according to their header

I am dynamically constructing a calendar(html table) in javascript. I want to have the Saturday and Sunday columns with a gray background color. When I'm adding the other cells to the calendar, I want to check for the cells …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More