Question

I’m implementing a time entry web application and the UI has a very tricky scrolling requirement.

Please see sample here: http://jsfiddle.net/yuipcheng/Ek5B2/

The vertical scrollbar is located on the far right. It scrolls all table rows but header and footer.

The horizontal scrollbar is located at the bottom of the table starting from the 4th column to the end. It scrolls all table columns but the first 3 columns.

The first 3 columns may have fixed width (eg 150px).
The 4th to the rest of the columns can have fixed width too but must be much smaller (eg 35px).

All table rows can be the same height and I’m open to both CSS and JavaScript solutions.

Answer 1

put the table inside div….something like

<div style="width:XXXpx;height:XXXpx;overflow:auto;">

table goes here

</div>

The overflow:auto will create the scrollbar when neccessary.