overall table full-width, actual data skinny

bimargulies

The paging and searching bars on my table are the full width of the containing area, but the actual data rows are narrower, and the data in the cells is wrapped as a result. The data comes in as json, and the third column shows up as a complex data structure which is displayed elsewhere when the user pushes a button which I render into the column in a callback.


[code]




Document ID
Score
Metadata ...







[/code]

[code]
$('#results').dataTable({
"bJQueryUI" : true,
"bSort": false,
"bPaginate": true,
"aoColumnDefs" : [ {
"fnRender" : function(oObj) {
return "Metadata ..."; // to be replaced by a button later.
},
"sClass": "metadata-cell",
"aTargets" : [ 'metadata' ]
} ]
});
[/code]

allan

If you add:

[code]
#query-results {
width: 100%;
}
[/code]
to your CSS that should do it. Equally you could add style="width:100%" to the table tag and that would do it as well.

Regards,
Allan

bimargulies

Allan, you could count the $20 I put into paypal as applying here :-).

More notes in a moment.

bimargulies

Sure enough. I thought the 100% width I had at the div above was all I needed. Thanks.

iceberg

I met similar case. Allan's hint is half correct to me. Given:



......



I found that #wrapper {width:100%} doesn't work, but #real_data {width:100%} works.

Still many thanks!