使jQuery数据表适合内容区域

我第一次尝试使用jQuery数据表。我从一个web服务获取数据，然后将其转换为Datatables所期望的格式Java脚本数据数组和列的格式。我的问题是，我正试图将其放入一个小部件中，放置在仪表板上，因此容器很小，我需要数据表来适应它的高度和宽度

<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>

})

完整的代码示例可以在这个提琴中看到：

---

我没有足够的代表发表评论，但底线是，您必须调整表格的样式，使其符合要求。减少字体、填充等，并设置每列的宽度，直到它适合容器。在如此小的容器中包含如此多的列，这将不是一项容易的任务

你是怎么做到的？我尝试了aoColumnDefs，但它对我的桌子没有任何作用。你是说普通的CSS吗？是的，只是普通的旧CSS。没有什么把戏。你只需要把所有的东西都做得足够小。同样，要在如此小的容器中容纳如此大量的数据将非常困难

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
});