General Question

klaas4's avatar

JQuery plugin to give a really large table a scollbar?

Asked by klaas4 (2176points) May 16th, 2009

Hi all,

I have just tried jQuery, and it’s amazing: that I didn’t think of it before! This gives me the opportunity to implement stuff into my site which I could never do before. But I can’t find a good plugin for the job.

Problem is: I have a really, really large table (around 30 rows and 41 columns) with a lot of padding to boot.

This is the table, and as you can see, the titles are on the left. I thought I made this work by creating 2 seperate tables and wrapping the right one in a div with an overflow, but this isn’t really compatible with all browsers in such a way that it always looks good.

I do not need vertical scrollbars, since the height is unlimited, but just that area on the right – with all those checkboxes – needs to have scrollbars.

Can this be done?

Davey.

Observing members: 0 Composing members: 0

9 Answers

philo23's avatar

this isnt so much a Javascript problem, but a CSS problem. However, tables are known to be finicky about CSS at the best of times, and scroll bars are probably the worst thing to try and do :/

I’m sure its possible to do, but its going to be buggy and maybe even broken completely in browsers such as IE6.

klaas4's avatar

How could I otherwise implement such a large table like this one into a design like this? (ole.daveyyzermans.nl)

Note that it will also be viewed by people with small screens. (1024×768)

philo23's avatar

I reckon using the method you currently have could work in all browsers, as its probably the best way. What’s the problem with the current method?

klaas4's avatar

Look at it in IE6, the width doesn’t change if you resize the window, and no scrollbars appear. And it’s not showing well in Firefox either.

philo23's avatar

that would be because IE6 doesnt support the overflow-x property, only the overflow.

Try overflow: auto; instead.

klaas4's avatar

Doesn’t work. :(

Maybe it has something to do with the width of one of the elements… can’t be, the only width defined is the titles-table.

funkdaddy's avatar

@klaas4 – you seem to be on the right track, try defining the width of the div you want to show scrollbars for…

klaas4's avatar

@funkdaddy That’s the problem, I would like it to be fluid.
When I do assign a width: the scrollbar appears, even with overflow-x, so @philo23, you were wrong.

klaas4's avatar

I got it to work with a bit of ordinary javascript. Thanks anyway!

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther