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

Posted 2023-04-12

【中文标题】datatable jquery - 表头宽度与正文宽度不对齐

【英文标题】：datatable jquery - table header width not aligned with body width

【发布时间】：2020-12-25 01:02:36

【问题描述】：

我正在使用 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。 谁能帮我解决这个问题？提前致谢。

【问题讨论】：

您能创建一个 jsFiddle 以便我们查看和测试问题吗？ jsfiddle.net

我无法创建 jsfiddle。我的代码中有一些数据库依赖。

你能用本地数据模拟表格吗？使用 aaData 参数？

这就是为什么我附上了屏幕截图，以便您猜出哪里出错了。

cfs : 你能从截图中猜到吗？我还添加了数据表代码

【参考方案1】：

原因

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

解决方案

如果表格在可折叠元素中，则需要在可折叠元素可见时调整标题。

例如，对于 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 方法。

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

如果您使用 Responsive、Scroller 或 FixedColumns 扩展，则需要使用额外的 API 方法来解决此问题。

如果您使用的是响应式扩展，您需要调用responsive.recalc() API 方法除了 columns().adjust() API 方法。请参阅Responsive extension – Incorrect breakpoints 示例。

如果您使用 Scroller 扩展，则需要调用 scroller.measure() API 方法而不是 columns().adjust() API 方法。请参阅Scroller extension – Incorrect column widths or missing data 示例。

如果您使用 FixedColumns 扩展，您需要调用fixedColumns().relayout() API 方法除了 columns().adjust() API 方法。请参阅FixedColumns extension – Incorrect column widths 示例。

链接

请参阅jQuery DataTables – Column width issues with Bootstrap tabs，了解在最初隐藏表格时 jQuery DataTables 中列最常见问题的解决方案。

【讨论】：

优秀的答案，+1

这对我有用，非常感谢。 ===> 如果表格在选项卡中，则需要在选项卡可见时调整标题。例如，对于 Bootstrap Tab 插件： $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) $($.fn.dataTable.tables(true )).DataTable() .columns.adjust(); );

正是我想要的，添加scrolX: true 并且标题的宽度变为width: 0px，就是这样，它在tab 内...谢谢！

在与标签插件斗争数小时后，您的回答挽救了一天，+1

就我而言，它是“药丸”而不是标签。 $('a[data-toggle="pill"]')

【参考方案2】：

我通过用div 和overflow:auto 包装“dataTable”表解决了这个问题：

.dataTables_scroll

    overflow:auto;

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

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

不要使用 sScrollX 或 sScrollY，删除它们并自己添加一个 div 包装器，它会做同样的事情。

【讨论】：

您还需要添加 position:relative 否则标题中的标签将保持固定而不跟随包装器的滚动。

我已经尝试了 10 多个解决方案建议，但除此之外没有一个可以帮助我。谢谢！

我只是禁用了sScrollX，sScrollY，然后它就可以工作了

@LarryCai 拯救了这一天。尝试了很多事情和建议，我所要做的就是注释掉滚动条。谢谢。

非常感谢...

【参考方案3】：

找到解决办法：

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

【讨论】：

您的意思是添加选项还是为类属性添加名称？

@JaxSwagger - 只发一条消息说，“此页面使用了仅在 IE 中有效的损坏插件”lmao

你让我很开心，非常感谢！而@Shaggy，只需添加浏览器检测；）

【参考方案4】：

我修好了，为我工作。

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

【讨论】：

“容器”是什么类型的元素？

【参考方案5】：

使用这些命令

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

【讨论】：

谢谢！不知道 sScrollXInner 存在。

【参考方案6】：

问题是在数据表在DOM上绘制之前调用数据表，在调用数据表之前使用set time out。

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

【参考方案7】：

正如 Gyrocode.com 所说，“您的表格很可能最初是隐藏的，这会阻止 jQuery DataTables 计算列宽。”

我也遇到过这个问题，在显示div后初始化dataTable就解决了

例如

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

【参考方案8】：

不需要想出各种拐杖，表头宽度和body不对齐，因为表格没有足够的时间为此填写数据，做setTimeout

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

【讨论】：

谢谢你救了我！

【参考方案9】：

上述解决方案均不适合我，但我最终找到了可行的解决方案。

我的这个问题的版本是由第三方 CSS 文件导致的，该文件将“box-sizing”设置为不同的值。我能够在不影响其他元素的情况下使用以下代码解决问题：

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

希望这对某人有所帮助！

【讨论】：

但我在使用 iceweasel（firefox debianized）时遇到问题...与 chrome 完美配合

【参考方案10】：

确保表格宽度为 100%

然后 "autoWidth":true

【讨论】：

在您的答案中提供准确的代码是有益的。对于 javascript/css 答案，欢迎使用 JSFiddle。

Table width: 100% 在autoWidth 为真时不执行任何操作，它以像素为单位设置内联宽度，有效地覆盖了 100% 规则。 autoWidth 将单独解决这个问题，但你不能拥有 100% 宽度的表格，至少对我来说这是破坏交易。

有趣的是，宽度 100% 单独解决了我的问题，感谢您指出正确的方向！！

【参考方案11】：

当使用 scrollX 或 scrollY 参数在 DataTables 中启用滚动时，它会将整个表格拆分为两个或三个单独的 html 表格元素；页眉、正文和可选的页脚。这样做是为了能够以跨浏览器的方式滚动 DataTable 的不同部分。

在我的情况下，我想要水平滚动条，因为内容正在向右滚动。因此，添加“scrollX”参数会在某些具有更多列的页面中产生此问题。

下面的代码在 DataTable 周围包裹了一个 div，样式为“overflow as auto”。 dataTable 执行完成后，我们需要添加 div。我们可以这样做：

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

如果您使用的是 scrollX、scrollY、scrollXInner 或 sScrollXInner 选项 - 删除它们。它们可能会导致问题。

来源：http://sforsuresh.in/datatables-header-body-not-aligned

【讨论】：

这个技巧解决了我的问题。非常感谢！

【参考方案12】：

此代码将使标题与正文对齐。 data-table-basic是我给的数据表的id。

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

【参考方案13】：

$("#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)。修改了上面的代码。

Discussion on Column sizing issue

【讨论】：

如果这不能解决问题，您是否碰巧有一些周围的 CSS 导致了问题。您能否禁用 CSS 并查看滚动和列宽是否按预期工作。

@MikeRamsey.thanks 提供线索 fnAdjustColumnSizing(false);

【参考方案14】：

经过大量小时后，我刚刚从options 中删除了scrollY，它工作正常

【参考方案15】：

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

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

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

【参考方案16】：

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

所以 DataTables 无法调整隐藏 div 中的列大小，可能是因为当表格隐藏时它在后端获得了 0px 的列宽。

【参考方案17】：

使用溢出自动和相对位置将表格标记元素简单地包装在 div 中。它将在 chrome 和 IE8 中运行。 我添加了高度 400 像素，以便即使在重新加载数据后也能保持表格大小不变。

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

【讨论】：

+ 1 因为这有效，但并不能安静地解决问题，因为我失去了滚动到表格底部的标题列。

我知道。事实上，我在一个小项目中留下了数据表，在这个项目中我必须保持固定的头部和可滚动的 tbody。我必须创建自己的表格和自定义 js

【参考方案18】：

标题上的一些简单 css 应该会为您完成此操作。

#rates_info, #rates_paginate

    float: left;
    width: 100%;
    text-align: center;

不能保证这会按原样工作，因为我还没有看到你的 html，但尝试一下，如果没有，那么你可以发布你的 html，我会更新它。

【讨论】：

你能解释一下“#rates_info, #rates_paginate”是什么

它们是数据表添加的页眉和页脚的id。我有一些例子可以解决你遇到的问题。

【参考方案19】：

见this solution。只需触发一次窗口滚动事件即可解决。

【参考方案20】：

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

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

【讨论】：

我在添加"scrollX": true时开始遇到这个问题

【参考方案21】：

我知道这是旧的，但我只是遇到了问题，并没有找到一个很好的解决方案。因此，与表格高度相比，我决定使用一些 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%",
    )

【参考方案22】：

$('.DataTables_sort_wrapper').trigger("click");

【讨论】：

请使用 4 空格/制表符缩进使您的代码像代码块一样格式化。可能您还应该注释您的代码，因为它与问题的关系、放置位置等不太清楚。最好的问候

【参考方案23】：

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

加载页面并单击表头后，它会展开并正常显示，我检查表头并记录.dataTables_scrollHeadInner div 的宽度。例如，就我而言，它是715px。然后将该宽度添加到css：

.dataTables_scrollHeadInner

  width: 715px !important;

【参考方案24】：

我的解决方案是添加以下内容： ...

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

...

而且看起来不错。

【参考方案25】：

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

【参考方案26】：

为容器表格添加固定宽度

JS：

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

CSS：

.tablaChildren 
    width: 97%;

【参考方案27】：

我遇到了类似的问题。我会在可扩展/可折叠面板中创建表格。只要桌子是可见的，没问题。但是如果你折叠一个面板，调整浏览器的大小，然后展开，问题就在那里。每当此函数展开面板时，我通过将以下内容放置在面板标题的单击函数中来修复它：

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

【参考方案28】：

使用这个：替换你的模式名称，清除你的数据表并加载

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

);

【参考方案29】：

在页面中添加到您的脚本：

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

【参考方案30】：

我使用的是 Bootstrap 4，并将 table-sm 类添加到我的表中。这弄乱了格式。删除该类解决了问题。

---

如果您无法删除该类，我怀疑通过 javascript 将其添加到 headers 表会起作用。当启用scrollX 时，Datatables 使用两个表来显示一个表——一个用于标题，一个用于正文。