datatable jQuery-表标题宽度与主体宽度不对齐

我正在使用jQuery数据表。运行该应用程序时，标头宽度与主体宽度不对齐。但是，当我单击页眉时，它与主体的宽度对齐，但是即使那样，仍有一些光线未对齐。仅在IE中会出现此问题。

JSFiddle

页面加载后的外观如下：

单击标题后：

我的数据表代码：

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

rates是我的表格ID。
有人可以帮我吗？提前致谢。

原因

您的表很可能最初是隐藏的，这阻止jQuery DataTables计算列宽。

解

• 如果table在可折叠元素中，则当可折叠元素变为可见时，您需要调整标题。

  例如，对于Bootstrap Collapse插件：

  $('#myCollapsible').on('shown.bs.collapse', function () {
     $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
  });
  

• 如果表格在标签中，则需要在标签可见时调整标题。

  例如，对于Bootstrap Tab插件：

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

上面的代码调整页面上所有表的列宽。看到columns().adjust()更多信息，API方法。

响应式，滚动式或固定列扩展

如果您使用的是响应式，Scroller或FixedColumns扩展，则需要使用其他API方法来解决此问题。

• 如果您使用响应扩展，你需要调用responsive.recalc()API方法除了以columns().adjust()API方法。请参阅响应性扩展-错误的断点示例。

• 如果使用的是Scroller扩展，则需要调用scroller.measure()API方法而不是 columns().adjust()API方法。请参见Scroller扩展-列宽不正确或数据丢失的示例。

• 如果您使用FixedColumns扩展，你需要调用fixedColumns().relayout()API方法除了以columns().adjust()API方法。请参见固定列扩展-不正确的列宽示例。

链接

有关最初隐藏表时jQuery DataTables列中最常见问题的解决方案，请参见jQuery DataTables –具有Bootstrap选项卡的列宽问题。

我用一个包裹“dataTable的”表解决了这个问题div有overflow:auto：

.dataTables_scroll
{
    overflow:auto;
}

并在dataTable初始化后添加此JS ：

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

不要使用sScrollX或sScrollY，请删除它们，然后div自己添加一个包装纸，这样做也可以。

找到了解决方案：

添加table-layout:fixed到表中。并以IE模式打开应用程序。

我修好了，为我工作。

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

要么

var table = $('#example').DataTable();
table.columns.adjust().draw();

参考：https : //datatables.net/reference/api/columns.adjust（）

以上解决方案均不适用于我，但最终我找到了一个可行的解决方案。

我这个问题的版本是由第三方CSS文件引起的，该文件将“ box-sizing”设置为其他值。我可以使用以下代码解决此问题，而不会影响其他元素：

    $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

希望这对某人有帮助！

正如Gyrocode.com所说：“您的表很可能一开始就被隐藏了，这阻止了jQuery DataTables计算列宽。”

我也有这个问题，并在显示div后仅通过初始化dataTable来解决它

例如

$('#my_div').show();
$('#my_table').DataTable();

问题是在DOM上绘制数据表之前调用了数据表，请在调用数据表之前使用设置超时。

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);

$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
        "bSortable": false
    },
    null,
    null,
    null,
    null
]}).fnAdjustColumnSizing( false );

尝试在数据表调用结束时调用fnAdjustColumSizing（false）。上面修改的代码。

列大小问题的讨论

确保表格宽度为100％

然后“ autoWidth”：true

不需要提出各种拐杖，表格标题宽度与主体不对齐，因为由于表格没有足够的时间为此而填写数据，因此请执行setTimeout

   setTimeout(function() {
     //your datatable code 
  }, 1000);

通过链接Mike Ramsey的答案，我最终发现表在DOM加载之前已初始化。

为了解决这个问题，我将初始化函数放在以下位置：

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);

以上解决方案都不适合我，因此我将发布解决方案：我将表加载到隐藏的div中，然后在构建表后显示div。当我首先显示/取消隐藏div，然后在可见表时构建表时，它起作用了。

因此，DataTables无法在隐藏的div中调整列的大小，这很可能是因为在隐藏表时，后端的列宽为0px。

只需将表标签元素包装在具有溢出自动和相对位置的div中即可。它将在chrome和IE8中运行。我添加了400px高度，以便即使重新加载数据后也能保持表格大小不变。

table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
        //"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
        //"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
        "sAjaxSource": "datass.php",
        "aoColumns": colf,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "bProcessing": true,
        "bJQueryUI":true,
        "bPaginate": true,
        "table-layout": "fixed",
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
            oSettings.jqXHR = $.ajax({
                "dataType": 'JSON',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            $(nRow).click(function() {
                $(".row_selected").removeClass("row_selected");
                $(this).addClass("row_selected");
                //mostra il detaglio
                showDetail(aData.CandidateID);
            });
        },
        "fnDrawCallback": function(oSettings) {

        },
        "aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header

使用这些命令

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });

标头上的一些简单CSS可以为您完成此操作。

#rates_info, #rates_paginate
{
    float: left;
    width: 100%;
    text-align: center;
}

不能保证它会按原样工作，因为我没有看到您的html，但请尝试一下，如果没有，您可以发布您的html，我将对其进行更新。

请参阅此解决方案。只能通过触发一次窗口滚动事件来解决此问题。

我面临着同样的问题。我为dataTable添加了scrollX：true属性，它起作用了。无需更改数据表的CSS

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });

我知道这很老了，但是我遇到了问题，却没有找到好的解决方案。因此，我决定使用一些js来获取scrollBody的高度（与表格高度相比）。如果scrollBody小于表格，则我将表格宽度增加15px以解决滚动条。我也在resize事件上对此进行了设置，以便它在我的容器更改大小时起作用：

const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();

if (tableHeight > scrollBodyHeight) {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "calc(100% + 15px)",
    })
} else {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "100%",
    })
}

$（'。DataTables_sort_wrapper'）。trigger（“ click”）;

不幸的是，这些解决方案都不适合我。也许由于表初始化的不同，我们得到了不同的结果。这些解决方案之一可能会为某人工作。无论如何，想分享我的解决方案，以防万一仍然有人对此问题感到困扰。不过，它有点黑，但是对我有用，因为以后我不会更改表格的宽度。

加载页面并单击标题后，它会展开并正常显示，然后检查表标题并记录.dataTables_scrollHeadInnerdiv的宽度。以我715px为例，例如。然后将该宽度添加到CSS：

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

我的解决方案是添加此：...

initComplete () {
      this.api (). columns (). header (). each ((el, i) => {
          $ (el) .attr ('style', 'min-width: 160px;')
      });
},

...

而且看起来还不错。

Gyrocode.com的问题答案是完全正确的，但他的解决方案并非在所有情况下都有效。一种更通用的方法是在document.ready函数之外添加以下内容：

$(document).on( 'init.dt', function ( e, settings ) {
    var api = new $.fn.dataTable.Api( settings );
    window.setTimeout(function () {
            api.table().columns.adjust().draw();
        },1);
} );

为容器表添加固定宽度

JS：

otableCorreo = $("#indexTablaEnvios").DataTable({                
    "fnInitComplete": function (oSettings, json) {
        $(otableCorreo.table().container()).addClass("tablaChildren");
    },
});

CSS：

.tablaChildren {
    width: 97%;
}

我有一个类似的问题。我将在可扩展/可折叠面板中创建表。只要表格可见，就没有问题。但是，如果您折叠面板，调整浏览器的大小，然后再展开，则问题就出在这里。每当此功能扩展面板时，我通过在面板标题的click函数中放置以下内容来修复该问题：

            // recalculate column widths, because they aren't recalculated when the table is hidden'
            $('.homeTable').DataTable()
                .columns.adjust()
                .responsive.recalc();

使用此方法：替换您的模式名称，清除数据表并加载

$('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) {

});

在页面中添加到脚本：

$( window ).resize(function() {
    var table = $('#tableId').DataTable();
    $('#container').css( 'display', 'block' );
    table.columns.adjust().draw();
});

我正在使用Bootstrap 4，并已将类添加table-sm到表中。那弄乱了格式。删除该类可以解决此问题。

如果您无法删除该类，我怀疑可以通过javascript将其添加到标头表中。scrollX启用后，数据表使用两个表来显示一个表-一个用于标题，一个用于主体。

我确实有这个问题一段时间了，我意识到我的桌子是在显示之前绘制的。

<div class="row">
    <div class="col-md-12" id="divResults">
    </div>
</div>        

function ShowResults(data) {
    $div.fadeOut('fast', function () {
        $div.html(data);
        // I used to call DataTable() here (there may be multiple tables in data)
        // each header's width was 0 and missaligned with the columns
        // the width woulld resize when I sorted a column or resized the window 
        // $div.find('table').DataTable(options);
        $div.fadeIn('fast', function () {
            Loading(false);
            $div.find('table').DataTable(options); // moved the call here and everything is now dandy!!!
        });
    });
}