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 arbitrary width, rather less than the container width.
Suggestions appreciated
The table declaration looks like this
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%">
And the javascript
jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){
jQuery('#querytableDatasets').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false
});
}); `
Inspecting the HTML in Firebug, you see this (note the added style="width: 0px;")
<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%" style="width: 0px;">
Looking in Firebug at the styles, the table.display style has been overridden. Can't see where this is coming from
element.style {
width:0;}
-- dataTables.css (line 84
table.display {
margin:0 auto;
width:100%;
}