datatable jquery-表头宽度与正文宽度不对齐

我正在使用jQuery数据表。运行应用程序时，标题宽度与正文宽度不对齐。但当我点击标题时，它与主体宽度对齐，但即使如此，也有一些轻微的错位。这个问题只发生在IE中

这是加载页面时的外观：

单击标题后：

我的数据表代码：

$("#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
    ]
});

$（“#费率”）.dataTable({
“bPaginate”：错误，
“sScrollY”：“250px”，
“bAutoWidth”：假，
“崩溃”：没错，
“bLengthChange”：false，
“bFilter”：错误，
“sDom”：“rt”，
“aoColumns”：[{
“可移植”：false
},
无效的
无效的
无效的
无效的
]
});

rates

是我的表id。

---

有人能帮我吗？提前感谢。

标题上的一些简单css应该可以帮你做到这一点

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

我不能保证这会像现在一样有效，因为我还没有看到你的html，但请尝试一下，如果看不到，你可以发布你的html，我会更新它。

$（“#rates”）.dataTable({
$("#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 );

“bPaginate”：错误，
“sScrollY”：“250px”，
“bAutoWidth”：假，
“崩溃”：没错，
“bLengthChange”：false，
“bFilter”：错误，
“sDom”：“rt”，
“aoColumns”：[{
“可移植”：false
},
无效的
无效的
无效的
无效的
]}).fn调整列大小（错误）；

尝试在datatables调用结束时调用FNAjustColumnShizing（false）。修改了上面的代码

找到了解决方案：

---

添加了

表格布局：已修复表中的
。并在IE模式下打开应用程序。
我解决了这个问题，将“dataTable”表包装为
div
，并使用
溢出：auto
：

.dataTables_scroll
{
    overflow:auto;
}

并在
数据表
初始化后添加此JS：

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

jQuery（'.dataTable'）.wrap（''）；

不要使用
sScrollX
或
sScrollY
，删除它们并添加一个自己做同样事情的
div
包装器。
只需使用溢出自动和相对位置将表标记元素包装在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

table=$（''）.appendTo（'#candidate'）.dataTable({
//“sScrollY”：“400px”，//不再需要-请参阅下面的换行
//“sScrollX”：“100%，//不需要更多信息-请参阅下面的换行
//“bScrollCollapse”：true，//不再需要-请参阅下面的换行
//“bScrollAutoCss”：true，//不再需要-请参阅下面的换行
“sAjaxSource”：“datass.php”，
“aoColumns”：colf，
“bJQueryUI”：没错，
“sPaginationType”：“两个按钮”，
“bProcessing”：正确，
“bJQueryUI”：没错，
“bPaginate”：对，
“表格布局”：“固定”，
“fnServerData”：函数（sSource、aoData、fnServerData回调、oSettings）{
aoData.push（{“name”：“filters”，“value”：$.toJSON（getSearchFilters（））}）；//inserice i filter
oSettings.jqXHR=$.ajax({
“数据类型”：“JSON”，
“类型”：“职位”，
“url”：sSource，
“数据”：aoData，
"成功":
});
},
“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{
$（nRow）。单击（函数（）{
$（“.row_selected”）.removeClass（“row_selected”）；
$（this）.addClass（“选定行”）；
//德塔格里奥酒店
展示详情（aData.CandidateID）；
});
},
“fnDrawCallback”：函数（oSettings）{
},
“aaSorting”：[[1，‘asc']]
}).wrap（“”）//每台柴油机的correzione柴油机
上述解决方案对我都不管用，但我最终找到了一个管用的解决方案

我的版本是由第三方CSS文件导致的，该文件将“框大小”设置为不同的值。我能够通过以下代码在不影响其他元素的情况下修复该问题：

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

希望这对别人有帮助
 确保表格宽度为100%

然后“autoWidth”：true
通过链接Mike Ramsey的答案，我最终发现该表在加载DOM之前就已经初始化了

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

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

看。它可以通过只触发一次窗口滚动事件来解决。
我也面临同样的问题。
我为dataTable添加了scrollX:true属性，它成功了。
无需更改datatable的CSS

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

我修好了，为我工作

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

或

参考资料：
以上所有解决方案都不适用于我，因此我将发布我的解决方案：我将表加载到一个隐藏的div中，然后在构建表后显示该div。当我首先显示/取消隐藏div，然后在表可见的情况下构建表时，它工作了

因此DataTables无法在隐藏的div中调整列的大小，可能是因为当表被隐藏时，后端的列宽为0px。
我知道这很旧，但我只是遇到了问题，没有找到很好的解决方案。因此，我决定使用一些js来获得滚动体的高度，与表的高度相比。如果scrollBody比表小，那么我将表的宽度增加15px以考虑滚动条。我也在“调整大小”事件上设置了此选项，以便在容器更改大小时可以使用：

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\u sort\u wrapper'）。触发器（“单击”）
 不幸的是，这些解决方案都不适合我。也许，由于表的初始化不同，我们会得到不同的结果。有可能，这些解决方案中的一个会对某人起作用。不管怎么说，我想分享我的解决方案，以防有人仍然对这个问题感到困扰。虽然这有点粗糙，但对我来说很有效，因为我以后不会改变桌子的宽度

加载页面后，单击页眉，使其
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%",
    })
}

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

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

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

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

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

.tablaChildren {
    width: 97%;
}

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

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

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

});

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

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

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

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

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

<style>    
    #data-table-basic_wrapper .dataTable, #data-table-basic_wrapper .dataTables_scrollHeadInner {
        width: 100% !important;
    }
</style>