Table not quite rendering correctly

mickeysox

Hi Allan,

Let me just start of by saying thanks, thanks for allowing your code to be free and for the support you give. I think its a great product you have here.

Basically I'm very new to the web development game and I have been trying to use your table. The problem is I don't seem to be able to render the tables as they are in your examples. The header seems to be the width of the screen but the columns don't seem to follow suite. I'm probably doing something fundamentally wrong, just can't quite work out what it is. I'm also using the 'start' theme from the jQuery UI which is applied to the table but doesn't quite look like your theme rolled 'start' on your example page! What I expected was the header to be aligned with the width of the column? Is that assumption incorrect?

The setup I have is

[code]
$(document).ready(function()
{

$('#t1').dataTable( {
"bJQueryUI": true,
'bProcessing': true,
"sPaginationType": "full_numbers"
});
}
);
[/code]

In terms of the table setup, I have no divs surrounding it or any customer classes / css etc.

Any help you could provide would be great.

Thanks again

Michael

mickeysox

Allan,

Here is a picture of what I am experiencing.

http://picup.ir/image-833E_4B16B1F6.jpg

Hope that helps.

Thanks

Michael

allan

Hi Michael,

I'm not 100% sure what the problem might be here, but I suspect that it's just a case of the table not getting the required layout information.

So things to try:

1. Give it a width of 100% in CSS

[code]
#t1 { width: 100% }
[/code]

My guess is that this will do the trick...

2. Add 'width="100%"' to the tag
3. Break out Firebug and see what might be going on
4. Post a link to a page showing the issue here, so we can take a look :-)

Hope this helps,
Allan

mickeysox

Hey Allan,

Its all sorted, the width='100%' did the trick. I now have a shiny new data table :-) (pretty steep learning curve web development!)

Thank you for your quick response Allan, I think you spoil the community here!

Thanks again.

Michael

the6step

I'm having a similar problem, except I know what's going on: for whatever reason, the table (the footer and the header) are being assigned a finite width by dataTables that is overriding their styling (as viewed in firebug).

allan

You can stop DataTables assigning a width to a table by setting bAutoWidth to false, although if you are using scrolling then it is needed (and therefore a width is set regardless of bAutoWidth), in order to make the various elements align correctly.

Allan