DataTables 修复了与宽表中的列不对齐的标题答案

【问题标题】：DataTables fixed headers misaligned with columns in wide tablesDataTables 修复了与宽表中的列不对齐的标题
【发布时间】：2012-10-22 02:20:07
【问题描述】：

问题

当使用sScrollX、sScrollXInner 和/或sScrollY 来实现一个固定的标题表并且其内部内容滚动时，该表的标题与Chrome 和IE 中的正文的其余部分不对齐.而 Firefox 则可以完美地显示它们。

据我所知，使用 1.9.4 版本时，仅当存在大量宽度波动的数据，并且非常长/不可包装的单词与小单词组合在同一列中时，才会出现此问题。此外，有问题的表格需要相当宽。

所有这些因素都在这个fiddle中得到了展示：

输出

Chrome：

IE：

火狐

建议的解决方案

这些解决方案以前曾提出过，但对我的实施没有影响。由于其中一些建议，我设置了一个干净的普通香草演示，因为我想确保没有其他代码对这种效果做出贡献。

关闭/删除我所有的 CSS
setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
按此顺序调用oTable.fnFilter( "x",0 ) 和oTable.fnFilter( "",0 )
"sScrollXInner": "100%"
摆脱所有宽度

对于未对齐的标题，我发现的唯一解决方案是删除 sScrollX 和 sScrollY，但这不能算作解决方案，因为您失去了固定的标题/内部内容滚动功能。很遗憾，这是一个临时的 hack，而不是修复！

注意

编辑/播放最新的fiddle。

我尝试了各种组合，这些组合可以通过使用链接http://jsfiddle.net/pratik136/etL73/#REV# where 1 <= #REV# <= 12 在小提琴的修订历史中观察到

历史

堆栈O
之前有人问过这个问题：jQuery Datatables Header Misaligned With Vertical Scrolling
但重要的区别在于，该问题的 OP 提到，如果删除了所有 CSS，他们能够解决问题，这在我的情况下是不正确的，并且我尝试了一些排列，因此认为这个问题值得重新发布。

外部
此问题也已在 DataTables 论坛上标记：

这个问题把我逼疯了！请贡献你的想法！

【问题讨论】：

对我来说，你的小提琴在 Chrome 中很好，但在 Firefox 中不对齐。

标签： jquery datatables

【解决方案1】：

编辑：查看带有“固定标头”的最新Fiddle：

Fiddle。

其中一个解决方案是自己实现滚动，而不是让 DataTables 插件为您完成。

我采用了您的示例并注释掉了 sScrollX 选项。当此选项不存在时，DataTables 插件只会将您的表按原样放入容器 div 中。该表格将伸出屏幕，因此，为了解决这个问题，我们可以将其放入具有所需宽度和溢出属性集的 div 中 - 这正是最后一个 jQuery 语句所做的 - 它将现有表格包装到 300px 宽的 div 中。您可能根本不需要在包装 div 上设置宽度（本例中为 300px），我在这里设置了它，以便轻松看到剪辑效果。并且很好，不要忘记用一个类替换那个内联样式。

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});

【讨论】：

Ruslans - 这是一个很好的开始！谢谢！请问是否可以调整此解决方案以允许设置sScrollY？目前，如果设置了，标题可以理解地显示在包装表下方。
所以你真正想要的是水平和垂直滚动表格。在这种情况下，将 sScrollY 和 sScrollX 属性注释掉，并将包装 div 限制为所需的垂直大小，例如100px 在以下小提琴中：jsfiddle.net/WZrCx
嗯，不完全是！使用sScrollY，我可以实现一个固定的标题效果，而包装它没有。
在这种情况下，您可以这样做：jsfiddle.net/ruslans_uralovs/zDaGk
@RuslansUralovs：我发现您的最后一个解决方案比 DataTables 提供的解决方案更有效。如果将表格设置为窗口宽度 (90%) 的某个百分比并且调整窗口大小以便需要垂直和水平滚动，则 DataTables 标题开始翻倒。我唯一买不起的奢侈品是数据重复。不幸的是，我拥有的一些表可能非常大，因此将 DOM 翻倍是无法承受的。当“带标题的表格”没有正文时，我将尝试实施解决方案，但在窗口调整大小时，列的宽度是从“带正文的表格”复制的。

【解决方案2】：

下面是实现固定表头的一种方式，不知道是否满足你的目的。变化是：

使用“bScrollCollapse”而不是“sScrollXInner”
不要使用字段集来包装表格
添加“div.box”css 类

它似乎完全可以在我的本地机器上运行，但使用 Fiddle 并不能完全运行。似乎 Fiddle 添加了一个 css 文件（normalize.css），它在某种程度上破坏了插件 css（很确定我也可以在 Fiddle 中充分工作，添加一些 css 明确规则，但现在没有时间进一步调查）

我的工作代码 sn-p 如下。希望这能有所帮助。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
  <script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>

 <style type='text/css'>
       div.box {
       height: 100px;
       padding: 10px;
       overflow: auto;
       border: 1px solid #8080FF;
       background-color: #E5E5FF;
   }

  .standard-grid1, .standard-grid1 td, .standard-grid1 th {
    border: solid black thin;
   }
</style>

<script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    var stdTable1 = $(".standard-grid1").dataTable({
        "iDisplayLength": -1,
        "bPaginate": true,
        "iCookieDuration": 60,
        "bStateSave": false,
        "bAutoWidth": false,
        //true
        "bScrollAutoCss": true,
        "bProcessing": true,
        "bRetrieve": true,
        "bJQueryUI": true,
        "sDom": '<"H"CTrf>t<"F"lip>',
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "sScrollX": "100%",
        //"sScrollXInner": "110%",
        "bScrollCollapse": true,
        "fnInitComplete": function() {
            this.css("visibility", "visible");
        }
    });
});
});

</script>


</head>
<body>
<div>
    <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
        <thead>
          <!-- put your table header HTML here -->
       </thead>
       <tbody>
          <!-- put your table body HTML here -->
        </tbody>
    </table>
</div>
</body>
</html>

【讨论】：

谢谢。这还没有解决我的问题，但它让我找到了某个地方！
不错的答案。我有一个不同的问题，但你的代码帮助我解决了它。你说的前两个变化是关键。

【解决方案3】：

我在 IE9 上遇到了同样的问题。

在将 HTML 写入页面之前，我将只使用 RegExp 去除所有空格。

var Tables=$('##table_ID').html();
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
Tables= Tables.replace(expr, '><');
$('##table_ID').html(Tables);
oTable = $('##table_ID').dataTable( {
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": false,
  "bSort": true,
  "bInfo": true,
  "bAutoWidth": false,
  "sScrollY": ($(window).height() - 320),
  "sScrollX": "100%",
  "iDisplayLength":-1,
  "sDom": 'rt<"bottom"i flp>'
} );

【讨论】：

您能在我提供的 jsFiddle 沙箱上重新创建此修复程序吗？

【解决方案4】：

添加这两行为我解决了这个问题

"responsive": true,
"bAutoWidth": true

现在有一个响应式插件可用：https://datatables.net/extensions/responsive/。但是，根据我的经验，我发现仍然存在一些错误。到目前为止，它仍然是我找到的最佳解决方案。

【讨论】：

你试过把它应用到小提琴上吗？成功了吗？

【解决方案5】：

对于引导用户，这为我修复了它：

   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .fixedColumns().relayout();

见文章here

【讨论】：

这应该是正确的答案。我只是在初始化完成后添加调整$('.dataTable').dataTable().on( 'init', function () { $(this).columns.adjust() .fixedColumns().relayout(); })

【解决方案6】：

下面的代码有效。至少更正了 IE 9.0 上的问题。希望这会有所帮助

var oTable =  $('#tblList').dataTable({
    "sScrollY": "320px",
    "bScrollCollapse": true,
    });

    setTimeout(function(){
        oTable.fnAdjustColumnSizing();
    },10);

【讨论】：

不，不修复。即使在 IE9/10 中。你在提供的 Fiddle 上试过了吗？
对不起。重新检查了我的代码。除了上面的代码之外，我还必须提供表格的宽度（以像素为单位）。
这解决了我的问题，并且无需提供以像素为单位的宽度。在 FF51 和 IE11 上测试。

【解决方案7】：

我遇到了同样的问题，这段代码解决了它。我从这篇文章中得到了这个解决方案，但我必须调整间隔时间才能让它工作。

setTimeout(function(){
        oTable.fnAdjustColumnSizing();
},50);

【讨论】：

之前的答案提出了相同的解决方案..但我们证明行不通...请在发布前阅读更多内容！我建议删除这个答案。 :-)

【解决方案8】：

在初始化DataTable后触发DataTable搜索功能，其中包含一个空白字符串。它将自动调整thead 与tbody 的错位。

$( document ).ready(function()
{

    $('#monitor_data_voyage').DataTable( {
        scrollY:150,
        bSort:false,
        bPaginate:false,
        sScrollX: "100%",
        scrollX: true,
    } );

    setTimeout( function(){
       $('#monitor_data_voyage').DataTable().search( '' ).draw();
    }, 10 );

});

【讨论】：

如果您在提供的小提琴上尝试，它不起作用。
只需在您的编辑器中尝试一下，搜索就会自动启动。将标题与列对齐。你投了反对票，只是看看“bAutoWidth”：在你的表格中是真还是假，这可能是其他问题，在这里发布你的代码我会解决它。
.DataTable().draw() 就足够了，中间不需要“.search('')”

【解决方案9】：

试试这个，下面的代码解决了我的问题

table.dataTable tbody th,table.dataTable tbody td 
{
     white-space: nowrap;
}

更多信息请参考Here。

【讨论】：

【解决方案10】：

我将它用于根据列数据自动隐藏列，在这种情况下，有时是它的中断表结构。我用这个 $($.fn.dataTable.tables(true)).DataTable().columns.adjust(); 和这个函数解决了这个问题$('#datatableId').on('draw.dt', function () { }); 在表数据加载后调用。

$('#datatableId').on('draw.dt', function () {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
})

【讨论】：

【解决方案11】：

将table-layout: fixed 添加到表格的样式（css 或样式属性）。

浏览器将停止应用其自定义算法来解决大小限制。

在网上搜索有关在固定表格布局中处理列宽的信息（这里有 2 个简单的 SO 问题：here 和 here）

显然：缺点是您的列的宽度不会适应它们的内容。

[编辑] 当我使用 FixedHeader 插件时，我的回答有效，但数据表论坛上的帖子似乎表明使用 sScrollX 选项时会出现其他问题：

bAutoWidth and sWidth ignored when sScrollX is set (v1.7.5)

我会想办法解决这个问题。

【讨论】：

谢谢，但它不起作用...你能在提供的小提琴上演示它吗？

【解决方案12】：

试试这个

这对我有用...我为我的解决方案添加了 css 并且它有效...虽然我没有更改数据表 css 中的任何内容，除了 {border-collapse:separate;}

.dataTables_scrollHeadInner {    /*for positioning header when scrolling is applied*/
padding:0% ! important
}

【讨论】：

你试过把它应用到我提供的小提琴上吗？
让我试试把链接提供给你
我遇到了同样的问题，这就是我解决问题的方式......所以我想我会分享它
谢谢你，但正如你将从这里的大量其他答案中看到的那样，它们都不适用于我的小提琴样本。他们可能为那个人工作过！
我正在使用 jquery 数据表版本 1.10.0，它适用于我....但我不知道为什么它不适用于您提供的小提琴。

【解决方案13】：

我知道已经标记了一个答案，但是对于有类似问题的人来说，上述问题并不适用。我将它与引导主题结合使用。

dataTables.fixedHeader.js 文件中有一行可以更改。该函数的默认布局如下所示。

    _matchWidths: function (from, to) {
        var get = function (name) {
            return $(name, from)
                .map(function () {
                    return $(this).width();
                }).toArray();
        };

        var set = function (name, toWidths) {
            $(name, to).each(function (i) {
                $(this).css({
                    width: toWidths[i],
                    minWidth: toWidths[i]
                });
            });
        };

        var thWidths = get('th');
        var tdWidths = get('td');

        set('th', thWidths);
        set('td', tdWidths);
    },

改变

    return $(this).width();

到

    return $(this).outerWidth();

outerWidth() 是一个包含在 jquery.dimensions.js 中的函数，如果您使用的是较新版本的 jquery。 IE。 jquery-3.1.1.js

上述函数的作用是映射原始表的 th，然后将它们应用于“克隆”表（固定表头）。在我的情况下，当它们未对齐时，它们总是偏离大约 5px 到 8px。很可能不是最好的解决方案，但为解决方案中的所有其他表提供了解决方案，而无需为每个表声明指定它。到目前为止，它只在 Chrome 中进行了测试，但它应该在所有浏览器上提供裁决解决方案。

【讨论】：

【解决方案14】：

如果你想使用 scrollY 使用：

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

【讨论】：

【解决方案15】：

我通过在 css 中添加以下代码解决了我的应用程序中的相同问题 -

.dataTables_scrollHeadInner
{
     width: 640px !important;
}

【讨论】：

【解决方案16】：

我已使用以下概念修复了列问题

$(".panel-title a").click(function(){
    setTimeout( function(){
           $('#tblSValidationFilerGrid').DataTable().search( '' ).draw();
        }, 10 );
})

【讨论】：

【解决方案17】：

在尽我所能之后，我添加了"autoWidth": true，它对我有用。

【讨论】：

之前已经给出了同样的答案。请不要重复答案，点赞。

【解决方案18】：

最近遇到同样的问题，当我在我的 css 上尝试一些东西时仍在寻找解决方案，检查是否添加到你的单元格（th 和 td）

-webkit-box-sizing: content-box; 
-moz-box-sizing: content-box;  
-sizing: content-box;

将解决此问题；对我来说，我使用了一些 html/css 框架，它在每个元素中添加了一个值 border-box。

【讨论】：

【解决方案19】：

使用 sScrollX,sScrollY 改为使用单独的 div 样式

.scrollStyle
 {
  height:200px;overflow-x:auto;overflow-y:scroll;
 }

在脚本中调用数据表后添加如下

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

经过多次尝试，它工作完美。

【讨论】：

如果您阅读了接受的答案，它已经建议了。但是你失去了拥有固定标题的能力。因此，这不是解决方案。
是的。我仍然没有找到固定标题问题的解决方案。但是我得到了数据表的滚动条。使用 scrollY 时，如果我调整 scrollHeader 高度它可以工作。但这不是正确的方法。

【解决方案20】：

我遇到了同样的问题，并且看到了很多似乎从未奏效的复杂答案。我确实通过简单地覆盖以下 CSS (site.css) 来解决它，并在 Chrome、IE 和 Firefox 中修复它：

table.display td {
padding: 0px 5px;
}
/* this is needed for IE and Firefox if using horizontal scroll*/
table{
    max-width: none;
    min-height: 0%;
}

这会覆盖 datatable.jui.css 中的 CSS

【讨论】：

【解决方案21】：

我刚刚找到了解决对齐问题的方法。更改包含静态标题的 div 的宽度将修复其对齐方式。我发现的最佳宽度是 98%。请参考代码。

自动生成的div：

<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">

此处的宽度为 100%，在初始化和重新加载数据表时将其更改为 98%。

jQuery('#dashboard').dataTable({
    "sEcho": "1",

    "aaSorting": [[aasortvalue, 'desc']],
    "bServerSide": true,
    "sAjaxSource": "NF.do?method=loadData&Table=dashboardReport",
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "sDom": "lrtip", // Add 'f' to add back in filtering
    "bJQueryUI": false,
    "sScrollX": "100%",
    "sScrollY": "450px",
    "iDisplayLength": '<%=recordCount%>',
    "bScrollCollapse": true,
    "bScrollAutoCss": true,
    "fnInitComplete": function () {
        jQuery('.dataTables_scrollHead').css('width', '98%'); //changing the width
    },
    "fnDrawCallback": function () {
        jQuery('.dataTables_scrollHead').css('width', '98%');//changing the width
    }
});

【讨论】：

您能在我提供的 jsFiddle 沙箱上重新创建此修复程序吗？