jquery - DataTables fixed headers misaligned with columns in wide tables

Question

Problem

When using the sScrollX, sScrollXInner and/or sScrollY to achieve a fixed header table with its inner content scrolling, the headers of the table go out of alignment with the rest of the body in Chrome and IE. Firefox, on the other hand, displays them perfectly.

Using the version 1.9.4, as far as I can tell, this issue only occurs when there is a lot of data with fluctuating widths, and with words that are very long/unwrappable combined in the same columns as small ones. Also, the table in question needs to be fairly wide.

All these factors are demonstrated in this fiddle:

Output

Chrome:

IE:

Firefox

Note

To edit/play with the latest fiddle.

I have tried various combinations which can be observed in the revision history of the fiddle by using the link http://jsfiddle.net/pratik136/etL73/#REV# where 1 <= #REV# <= 12

History

StackO
This question has been asked before: jQuery Datatables Header Misaligned With Vertical Scrolling
but the vital difference is that the OP of that question mentioned that they were able to fix the issue if all CSS was removed, which is untrue in my case, and I have tried a few permutations, thus thought the question worthy of a repost.

External
This issue has also been flagged on the DataTables forum:

This issue has driven me nuts! Please contribute your thoughts!

score 18 · Accepted Answer

編集：「固定ヘッダー」を使用した最新のフィドルを参照してください。

フィドル。_

解決策の1つは、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())});

score 13 · Accepted Answer

以下は、固定ヘッダーテーブルを実現する方法です。目的に十分かどうかはわかりません。変更点は次のとおりです。

「sScrollXInner」の代わりに「bScrollCollapse」を使用します
テーブルをラップするためにフィールドセットを使用しないでください
「div.box」cssクラスを追加します

ローカルマシンでは完全に機能しているようですが、Fiddleを使用しても完全には機能していません。Fiddleはプラグインcssを何らかの方法で壊したcssファイル（normalize.css）を追加しているようです（いくつかのcssクリアルールを追加してFiddleでも完全に機能させることができますが、今はさらに調査する時間がありません）

私の作業コードスニペットは以下のとおりです。これがお役に立てば幸いです。

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

score 4 · Accepted Answer

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

score 4 · Accepted Answer

これらの2行を追加すると、この問題が修正されました

"responsive": true,
"bAutoWidth": true

レスポンシブプラグインが利用可能になりました：https ：//datatables.net/extensions/sensitive/ 。しかし、私の経験では、まだいくつかのバグがあることがわかりました。それは私がこれまでに見つけた最良の解決策です。

score 4 · Accepted Answer

ブートストラップユーザーの場合、これで修正されました。

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

こちらの記事をご覧ください

score 2 · Accepted Answer

以下のコードは機能しました。少なくともIE9.0の問題を修正しました。お役に立てれば

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

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

score 2 · Accepted Answer

私は同じ問題を抱えていました、そしてこのコードはそれを解決します。この記事からこの解決策を得ましたが、それが機能するように間隔の時間を調整する必要がありました。

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

score 2 · Accepted Answer

空白の文字列を含む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 );

});

score 1 · Accepted Answer

これを試してみてください、次のコードは私の問題を解決しました

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

詳細については、plsはここを参照してください。

score 1 · Accepted Answer

私はこれを列データごとの自動列非表示に使用します。その場合は、ブレークテーブル構造になります。私はこの$（$。fn.dataTable.tables（true））。DataTable（）。columns.adjust（）;でその問題を解決します。そしてこの関数 $（'＃datatableId'）。on（'draw.dt'、function（）{}）; tabledataのロード後に呼び出します。

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

score 0 · Accepted Answer

table-layout: fixedテーブルのスタイル（cssまたはstyle属性）に追加します。

ブラウザは、サイズの制約を解決するためのカスタムアルゴリズムの適用を停止します。

固定テーブルレイアウトでの列幅の処理に関する情報をWebで検索します（ここに2つの簡単なSOの質問があります：こことここ）

明らかに、欠点は、列の幅がコンテンツに適応しないことです。

[編集]FixedHeaderプラグインを使用したときに私の答えは機能しましたが、datatableのフォーラムへの投稿は、sScrollXオプションを使用すると他の問題が発生することを示しているようです：

sScrollXが設定されている場合はbAutoWidthとsWidthは無視されます（v1.7.5）

これを回避する方法を見つけようとします。

score 0 · Accepted Answer

これを試して

これは私にとってはうまくいきます...私は私のソリューションにcssを追加しました、そしてそれはうまくいきます...私は{border-collapse：separate;}を除いてデータテーブルcssで何も変更しませんでしたが

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

score 0 · Accepted Answer

すでにフラグが立てられた回答があることは知っていますが、上記と同じような問題を抱えている人にとってはうまくいきません。ブートストラップテーマと組み合わせて使用しています。

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

externalWidth（）は、新しいバージョンのjqueryを使用している場合にjquery.dimensions.jsに含まれる関数です。すなわち。jquery-3.1.1.js

上記の関数は、元のテーブルのthをマップし、それらを「複製された」テーブル（固定ヘッダー）に適用します。私の場合、位置がずれていると、常に約5pxから8pxずれていました。おそらく最善の解決策ではありませんが、テーブル宣言ごとに指定しなくても、ソリューション内の他のすべてのテーブルにソリューションを提供します。これまでのところChromeでのみテストされていますが、すべてのブラウザで適切なソリューションを提供するはずです。

score 0 · Accepted Answer

scrollYを使用する場合は、次を使用します。

$（'。DataTables_sort_wrapper'）。trigger（ "click"）;

score 0 · Accepted Answer

cssに以下のコードを追加することで、アプリケーションの同じ問題を修正しました-

.dataTables_scrollHeadInner
{
     width: 640px !important;
}

score 0 · Accepted Answer

以下のコンセプトを使用して列の問題を修正しました

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

score 0 · Accepted Answer

できる限りのことを試した後、追加"autoWidth": trueしただけでうまくいきました。

score -1 · Accepted Answer

最近同じ問題に直面し、cssで何かを試したときにまだ解決策を探していました。セルに追加するかどうかを確認してください（thとtd）

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

この問題を解決します。私にとってはborder-box、すべての要素に値を追加するhtml/cssフレームワークを使用していました。

score -1 · Accepted Answer

代わりにsScrollXを使用し、sScrollYは個別のdivスタイルを使用します

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

スクリプトでのdatatable呼び出しの後に以下を追加します

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

多くの試みの後、それは完全に機能します。

score -1 · Accepted Answer

私はこれとまったく同じ問題を抱えていて、うまくいかないように思われる複雑な答えをたくさん見ました。以下の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をオーバーライドします

score -1 · Accepted Answer

位置合わせの問題を修正する方法を見つけました。静的ヘッダーを含む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
    }
});

jquery - DataTables fixed headers misaligned with columns in wide tables

Problem

Output

Suggested Solutions

Note

History

21 に答える 21

jquery - DataTables fixed headers misaligned with columns in wide tables

Problem

Output

Suggested Solutions

Note

History

21 に答える 21

Related

Reference