jQuery DataTables：控制表格宽度

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

调整整个表格宽度时这很有效。感谢 @Peter Drinnan！

也可以尝试这个解决方案。这个方法能够轻松解决我的DataTable列宽问题。

JQuery DataTables 1.10.20引入了columns.adjust()方法，可以解决Bootstrap切换选项卡的问题。

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

请参考文档：滚动和Bootstrap选项卡。

这里的解决方案都不适用于我。即使是在 datatables 主页上的示例，也无法正常工作，因为在展示选项中初始化了表格。

我找到了一个解决方案。诀窍是使用选项卡中的 activate 选项，并在可见表格上调用 fnAdjustColumnSizing()：

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

你是在ready事件中执行这个操作吗？

$(document).ready(function() { ... });

元素的尺寸很可能取决于文档是否完全加载。

仅仅想说我和你遇到的问题一模一样，尽管我只是将JQuery应用于一个普通表格而没有使用任何Ajax。由于某种原因，Firefox在揭示表格后不会展开它。我通过将表格放置在DIV中，并将效果应用于DIV来解决了这个问题。

在您的ajax调用的“success”中创建固定标题，您将不会在标题和行中遇到任何对齐问题。

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

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

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

我找到了另一个关于这个问题的有用链接，它解决了我的问题。

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Datatables 强制宽度表格

希望这能帮助那些仍在苦苦挣扎的人。
不要将表格放在任何容器中。在表格渲染后，将表格的包装器作为您的容器。我知道在您与表格一起有其他内容的地方可能无效，但是您总是可以将该内容附加回来。
对我而言，如果您有侧边栏和实际上是该侧边栏的偏移量的容器，则会出现此问题。

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

我添加了一个面板 panel-default
而您的类：

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

对于那些在使用固定标题插件时调整表格/单元格宽度遇到问题的人：

Datatables依赖于thead标签来确定列宽参数。这是因为大多数表格的内部html都是自动生成的，所以这是唯一的本地html。

然而，有些单元格可能比存储在thead单元格中的宽度要大。

例如，如果您的表格有很多列（宽表格）且行数据很多，则调用“sWidth”来更改td单元格大小将无法正常工作，因为子行会根据溢出内容自动调整td大小，并且这是在表格被初始化并传递其初始化参数之后发生的。

原始的thead“sWidth”参数被覆盖（缩小），因为datatables认为您的表格仍具有其默认宽度100％-它没有意识到某些单元格已经溢出。

为了解决这个问题，我找出了溢出宽度，并相应地调整了表格的大小，在表格被初始化后进行处理-同时我们可以同时初始化我们的固定标题：

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

当我在表格周围包裹一个div时，遇到了类似的问题。

添加position: relative对我有帮助。

#report_container {
 float: right;
 position: relative;
 width: 100%;
}