jQuery DataTables: control table width

Question

I have a problem controlling the width of a table using the jQuery DataTables plugin. The table is supposed to be 100% of the container width, but ends up being an arbitrar

Answer 1

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

This worked fine to adjust the whole table width. Thanks @Peter Drinnan!

Answer 2

create your fixedheader inside the "success" of your ajax call, you will not have any alignment problem in header and rows.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

Answer 3

I have had numerous issues with the column widths of datatables. The magic fix for me was including the line

table-layout: fixed;

this css goes with the overall css of the table. For example, if you have declared the datatables like the following:

LoadTable = $('#LoadTable').dataTable.....

then the magic css line would go in the class Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

Answer 4

TokenMacGuys solution works best becasue this is the result of a bug in jQdataTable. What happens is if you use $('#sometabe').dataTable().fnDestroy() the table width gets set to 100px instead of 100%. Here is a quick fix:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

Answer 5

Hope this helps someone who's still struggling.

Don't keep your table inside any container. Make the table's wrapper your container after the table's rendered. I know this might be invalid at places where you have something else along with the table but then you could always append that content back.

For me,this problem arises if you have a sidebar and a container that is actually an offset to that sidebar.

$(YourTableName+'_wrapper').addClass('mycontainer');

(I added a panel panel-default)
And your class :

.mycontainer{background-color:white;padding:5px;}

Answer 6

Well, I'm not familiar with that plugin, but could you reset the style after adding the datatable? Something like

$("#querydatatablesets").css("width","100%")

after the .dataTable call?