Make jQuery Datatable fit content area

Question

I am trying to use jQuery Datatables for the first time. I am getting data back from a web service then massaging it in to the format that Datatables expects(Javascript array of data and one for columns). My issue is I am trying to make this in to a widget to place on a dashboard so the container is small and I need the datatable to fit in to it both height and width.

<div class="column">
<div class="portlet" style="border:2px solid;">
    <div class="portlet-header">Table</div>
    <div class="portlet-content" id="b_container"></div>
</div>

var createNewTable = function (data) {

var aoColumn = _.map(_.first(data), function (row) {
    return {
        'sTitle': row.Key
    };
});
var aaData = _.map(data, function (row) {
    return _.map(row, function (innerRow) {
        return innerRow.Value;
    });
});
$('.portlet-content').append('<table id ="t_container"><thead></thead><tbody></tbody></table>');
$('#t_container').dataTable({
    "bAutoWidth": false,
        "aaData": aaData,
        "aoColumns": aoColumn
});

};

full code example can be seen in this fiddle:

http://jsfiddle.net/2ccgk/3/

Answer 1

I don't have enough rep to comment, but the bottom line is you are going to have to style your table to fit. Reduce the font, padding, etc. and set the widths of each column until it fits in the container. Its not going to be an easy task with so many columns in such a small container.