Scrolling the content of tables is an problematic issue, since there is no simple and browser-safe solution to achieve that.
The best and most secure way to do it requires JavaScript. You would achieve even horizontal Scrolling easily (it's included for free) with this technique I used. You can transform that to your problem easily:
1) I made 3 Tables
2) Placed the middle Table that holds the Data inside a DIV container
3) set the DIV style to overflow:auto
4) gave the header and footer table and the div each a width of 100%
5) surrounded everything by another div to control the overall table width
6) made very sure that the quantity of columns match in all three tables, and that all three have the same styles regarding paddings, margins and borders
now the interesting part:
6) below the last element of that table construction, write a javascript block (or include it from a file)
7) write a function that successively looks at each column (use a for loop), starting with the first one. At every iteration of that loop, check the td cell with of the first two tables in the current column. Check which with is the bigger one and assign that to the smaller td cell's style. You may want to apply that value to the footer table, too.
8) call that function. You may want to do that in an interval or when special events occur, such as new data in the cells (if using ajax for example).
Note: If you do scroll horizontally, your columns sizes are synchronized. But you will have to synchronize the scrolling position of your header and footer table with the content table. Alternatively you just let the overall div scroll the whole thing horizontally, but not vertically. That would be the job of the DIV that contains the data table.
This technique worked very well in all major browsers in an very coplex gantt diagram project.
Note: You can think of that concept easily in a 90 degrees rotated way, so that you fix the first and last header column when scrolling.
Edit: Here is another example from my code base that might help you to get the solution:
var left_td = document.getElementById("left_td");
var right_td = document.getElementById("right_td");
var contentDiv = document.getElementById("contentDiv");
window.setInterval(function(){
var left_td_width = Math.round((parseInt(contentDIV.offsetWidth) - 120) / 2);
var right_td_width = (parseInt(contentDIV.offsetWidth) - left_td_width - 120;
left_td.style.width = left_td_width + "px";
right_td.style.width = right_td_width + "px";
}, 25);
This code does the following: It makes sure, that an Table with 3 columns always looks like that: The first and last column have the same size, and the center column has a width of 120 pixels.
Sure that does not apply directly to your special problem, but It might give you a starting point in dynamic table manipulation through JavaScript.