CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ray Cheng
Ray Cheng

Reputation: 12586

Vertical and horizontal scrollable table

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.

Upvotes: 1

Views: 2554

Answers (2)

ptriek
ptriek

Reputation: 9286

You could have a look at this solution:

http://www.novasoftware.com/Download/jQuery_FixedTable/jQuery_FixedTable_Demo.htm

(and you could try to Google before asking... :-)

Upvotes: 0

dku.rajkumar
dku.rajkumar

Reputation: 18588

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.

Upvotes: 2

Related Questions