Question

EDIT: SOLVED. When the page originally loads the datatable is formed using the css files as laid out. However when it was calling the javscript it was rebuilding the datatable and ignoring any CSS files I had referenced. As such it was automatically shrinking the table to match the size of the text. This was avoided by setting bAutoWidth = false in the actual creation of the datatable.

Thanks to everyone who helped!.

so I have a datatable as follows.

   <div class="datatable" style="display:none;">
            <div class="row">
                <table class="display" id="testtable">
                    <thead>
                        <tr>
                            <th>First column</th>
                            <th>Second</th>
                            <th>Third</th>
                        </tr>
                    </thead>
                    <tbody id="selectable">                           
                                <tr class="gradeU">
                                    <td align="left">First column info</td>
                                    <td align="left">second</td>
                                    <td>Third</td>
                                </tr>
                    </tbody>
                </table>

            </div>
        </div>

So the above is the datatable, as you can see the table itself is hidden as I only want to show it when a user hovers over a button. When the user hovers over the button the following code is called from a function.

   $(".datatable").show();

This works, however it breaks the CSS. The datatable becomes very squashed and is only about one quarter the width it should be. I have tried setting the width to be bigger in the function that is called however no luck. I know it has something to do with the following code

     style="display:none;"

as once I take this out the table displays fine however I need it hidden until the function is called.

I have tried the usual $(element).style.visibilty but nothing seems to make a difference, the table stubbornly refuses to go to its correct size. Any help is greatly appreciated and thanks in advance.

EDIT: Below is the CSS of the table and TD

   table.display {
margin: 10px;
padding: 5px;
clear: both;
width: 98%;
overflow: auto;
/*    text-align: center;*/
height: auto;

    }

    table.display td {
        padding: 5px 5px;
     }

    table.display td.center {
        text-align: center;
    }

EDIT: I have uploaded 2 images to show the differences between the tables.

http://imageshack.us/photo/my-images/840/correecttable.png/

That is the table when it is not hidden.

http://imageshack.us/photo/my-images/822/incorrecttable.png/

That is the table when it is hidden and then shown using jQuery.

Answer 1

When the page originally loads the datatable is formed using the css files as laid out. However when it was calling the javscript it was rebuilding the datatable and ignoring any CSS files I had referenced. As such it was automatically shrinking the table to match the size of the text. This was avoided by setting bAutoWidth = false in the actual creation of the datatable.

Thanks to everyone who helped!