Tables with lots of columns, needs to overflow the browser page with.
Tables with lots of columns, needs to overflow the browser page with.
Hello,
I am implementing DataTables for a site that has lots of tables that over flow the browser width (where you have to scroll to the right to look at the rest of the columns).
I am trying to get DataTables to allow for this. So far the only thing I have found that will work is setting bAutoWidth to false, and then specifying on the ID of the table what the css with is in pixels. This does not extend the tool bars either.
Is there an option that I am missing that could help me accomplish this?
I am implementing DataTables for a site that has lots of tables that over flow the browser width (where you have to scroll to the right to look at the rest of the columns).
I am trying to get DataTables to allow for this. So far the only thing I have found that will work is setting bAutoWidth to false, and then specifying on the ID of the table what the css with is in pixels. This does not extend the tool bars either.
Is there an option that I am missing that could help me accomplish this?
This discussion has been closed.
Replies
If you set the table width to 100% and then have a wrapper around the table (a simple div or something) which has the width that you desire (2000px or whatever) then this should do the trick for you. DataTables (like all HTML tables) will take up the minimum amount of width possible, unless you explicitly tell it to do otherwise.
Regards,
Allan
Now on to my comment: I also needed to generate super wide tables on a fixed width design page. The suggestion above was a good start, but adding a div (with overflow: auto; width:2000px;) had the disadvantage of including the table_wrapper and all the controls. So not just the grid was scrolling, but the filter box etc. I didn't really want to mess with the way the wrapper and controls were being styled.
I suspect there are many ways to solve this (insert the overflow div from javascript perhaps). But I think the elegant and *built-in* sDom mechanism is the nicest solution, altho it was not at all obvious from my initial reading of the docs.
I used this sDom setting to modify the default layout:
[code]'lfr<"table_overflow"t>ip'[/code]
And added this to the css:
[code]
.table_overflow {
overflow: auto;
width:2000px;
}
[/code]
And tadaa! Very nice. You seem to have thought of pretty much everything Allan. Thanks!