DataTables固定标题与宽表中的列不对齐

时间：2012-11-01 13:23:19

标签： jquery datatables

问题

使用sScrollX，sScrollXInner和/或sScrollY来实现内部内容滚动的固定标头表时，表格的标题与其余内容不一致Chrome和IE中的正文。另一方面，Firefox可以完美地显示它们。

使用版本1.9.4，据我所知，这个问题只发生在存在大量波动宽度的数据时，并且在非常长/不可包含的单词与小列相同的列中。此外，该表格需要相当广泛。

所有这些因素都在fiddle中展示：

输出

铬：
Chrome Screenshot

IE：
IE9 Screenshot

火狐
Firefox Screenshot

建议的解决方案

之前已经提出过这些解决方案，但对我的实施没有任何影响。由于其中一些建议，我设置了一个简洁的普通香草演示，因为我想确保没有其他代码对此产生影响。

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

我发现错误标题的唯一解决方案是取出sScrollX和sScrollY，但这不能算作解决方案，因为您丢失了固定的标头/内部内容滚动功能。很遗憾，这是一个暂时的黑客，而不是一个修复！

注意

使用最新的fiddle编辑/播放。

我尝试过各种组合，可以使用http://jsfiddle.net/pratik136/etL73/#REV# 1 <= #REV# <= 12

链接{{1}}在小提琴的修订历史中观察到

历史

StackO
之前已经问过这个问题：jQuery Datatables Header Misaligned With Vertical Scrolling
但至关重要的是，该问题的OP提到他们能够解决问题，如果所有的CSS都被删除了，这在我的情况下是不真实的，并且我尝试了一些排列，因此认为值得重新发布的问题。

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

这个问题让我疯了！请提出你的想法！

21 个答案:

答案 0 :(得分：12)

以下是一种实现固定标头表的方法，我不知道它是否足以达到您的目的。 变化是：

  1. 使用“bScrollCollapse”代替“sScrollXInner”
  2. 不要使用fieldset来包装表
  3. 添加“div.box”css类

    4. 它似乎完全在我的本地机器上运行，但它并没有完全使用Fiddle。 似乎Fiddle添加了一个css文件（normalize.css），它以某种方式破坏了插件css（我确信我可以在Fiddle中完全正常工作，添加一些css明确的规则，但现在没有时间进一步调查）

    我的工作代码段如下。 希望这可以提供帮助。

    <!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>

答案 1 :(得分：12)

编辑： 使用“固定标题”查看最新的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())});

答案 2 :(得分：4)

我在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>'
} );

答案 3 :(得分：4)

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

"responsive": true,
"bAutoWidth": true

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

答案 4 :(得分：2)

以下代码有效。至少修正了I.E 9.0的问题。希望这有帮助

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

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

答案 5 :(得分：2)

在初始化DataTable并在其中包含空白字符串后触发DataTable搜索功能。它会自动调整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 ); }); 的错位。

{{1}}

答案 6 :(得分：2)

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

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

参见文章here

答案 7 :(得分：1)

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

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

答案 8 :(得分：1)

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

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

有关更多信息，请参阅Here。

答案 9 :(得分：0)

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

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

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

显然：缺点是你的栏目宽度不适应他们的内容。

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

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

我会试着找到解决这个问题的方法。

答案 10 :(得分：0)

尽一切可能后，我只添加了"autoWidth": true，它对我有用。

答案 11 :(得分：0)

我将其用于根据列数据进行自动列隐藏，在这种情况下，有时会使用其中断表结构。我用这个 $（$。fn.dataTable.tables（true））。DataTable（）。columns.adjust（）; 和此功能在表数据加载后 $（'＃datatableId'）。on（'draw.dt'，function（）{}）; 调用。

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

答案 12 :(得分：0)

I have fixed the column issue bu using below concept

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

答案 13 :(得分：0)

我通过在css中添加以下代码来修复我的应用程序中的相同问题 - 

.dataTables_scrollHeadInner
{
     width: 640px !important;
}

答案 14 :(得分：0)

如果您想使用滚动使用：

$（＆＃39; .DataTables_sort_wrapper＆＃39）触发。（＆＃34;单击＆＃34）;

答案 15 :(得分：0)

我知道已经有一个已经标记过的答案，但对于有类似问题的人来说，上述情况并不适用。 我将它与bootstrap主题一起使用。

可以在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。即。的jquery-3.1.1.js

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

答案 16 :(得分：-1)

试试这个

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

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

答案 17 :(得分：-1)

我刚刚找到了解决对齐问题的方法。更改包含静态标头的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
    }
});

答案 18 :(得分：-1)

我遇到了同样的问题，并且看到许多复杂的答案似乎从来没有用过。我通过简单地覆盖下面的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

答案 19 :(得分：-1)

使用sScrollX，sScrollY使用单独的div样式

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

在脚本

中调用数据表之后添加以下内容 
 jQuery('.dataTable').wrap('<div class="scrollStyle" />');
经过多次尝试后， 正常工作。

答案 20 :(得分：-1)

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

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

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

相关问题
最新问题